::selection伪类仅控制高亮样式，无法阻止选中和复制；真正禁用需用user-select: none，配合服务端脱敏与js拦截才有效。
selection伪类对敏感文本无效？先确认作用域和继承链
直接给 ::selection 加 color: transparent 或 background: transparent，在多数现代浏览器里确实能“隐藏”高亮效果，但实际复制行为完全不受影响——用户仍可选中、复制、粘贴。真正起作用的是「能否被选中」，而非「是否显示高亮」。
关键判断点：如果目标文本被包裹在 user-select: none 的父容器里，::selection 根本不会触发；反之，若文本本身允许选择，但你只改了 ::selection 的样式，复制功能照常工作。
-
user-select: none是阻止选中的第一道防线，::selection只是视觉反馈层 - Chrome/Edge 120+ 和 Firefox 对
transparent背景的渲染略有差异：Firefox 有时仍会显示极淡灰底，需配合background: rgba(0,0,0,0)显式声明 - 不要对整个
body或div直接设::selection，容易污染其他可交互区域（如输入框、按钮文字）
如何让身份证号、手机号等字段「看起来可选、实则不可复制」
纯 CSS 无法真正禁用复制，但可以通过组合策略大幅提高门槛：视觉上弱化选中反馈 + 行为上阻断复制事件 + 结构上隔离敏感内容。
- 对敏感字段单独加 class，例如
<span class="sensitive-id">310115******1234</span> - 用
.sensitive-id { user-select: none; }阻断默认选中，比依赖::selection更可靠 - 如果必须保留部分可选性（比如允许复制前4位），改用
pointer-events: none配合user-select: text，再用 JS 拦截copy事件并修改clipboardData - 避免把敏感信息写死在 HTML 中——服务端渲染时就做掩码，前端只接收已脱敏字符串，从源头减少风险
transparent色值在::selection里为什么有时还看得见高亮？
不是 bug，是浏览器对透明色的合成逻辑不同。当页面背景非纯白（比如浅灰、渐变、图片），background: transparent 实际会叠加一层“默认选中色”，导致残留视觉痕迹。
立即学习“前端免费学习笔记（深入）”；
- 稳妥写法是显式声明完全透明的 rgba：
::selection { background: rgba(0,0,0,0); color: transparent; } -
color: transparent在某些字体渲染下可能被转为近黑（尤其 macOS Safari），建议补一句text-shadow: 0 0 0 transparent;强制消除 - IE 完全不支持
::selection的transparent值，如果还要兼容，得降级为color: #fff+background: #000这类高对比方案
别忘了移动端 touchstart 和 longpress 的干扰
桌面端靠 user-select: none 就够用，但 iOS 和 Android 原生浏览器在长按后仍可能唤出「复制」气泡——这是系统级行为，CSS 无权关闭。
- 在敏感容器上加
-webkit-user-select: none; user-select: none;，iOS Safari 才会真正忽略长按 - Android Chrome 115+ 开始支持
touch-action: manipulation辅助抑制误触，但不能替代user-select - 如果业务强要求禁用复制，最终还得靠 JS 监听
contextmenu和selectstart并preventDefault()，但要注意：这会影响无障碍访问（screen reader 用户依赖选中朗读）
真正难的不是让字看不见高亮，而是让字在 DOM 里就不以原始形态存在。掩码、动态渲染、服务端脱敏——这些比折腾 ::selection 的透明度实在得多。
