::selection 不能防止复制，真正起作用的是 user-select: none；前者仅控制选中后的视觉样式，后者才控制是否可选，二者常被误混用导致防复制失效。
::selection 不能防止复制——它根本不管“能不能选”，只管“选中后长什么样”。
真正起作用的是 user-select: none，而 ::selection 只是视觉补丁，用错地方反而让人误以为防住了。
为什么::selection加user-select: none看起来像“防复制”？
很多人把两者混用，是因为：当文字不可选（user-select: none）时，::selection 样式自然不生效；但反过来，只改 ::selection 背景色或透明度，用户照样能拖选、右键、Ctrl+C。
常见错误写法：.sensitive::selection { user-select: none; } —— 这行声明被浏览器直接忽略，因为 ::selection 不支持 user-select 属性。
真正该做的，是分开处理：
-
user-select: none控制“能否选中”（需四前缀） -
::selection控制“选中后怎么显示”（仅限color、background-color等少数属性）
user-select: none 写全了还是失效？检查这四个点
失效不是语法错，而是环境没兜住：
- 没写全前缀：
-webkit-user-select: none（iOS/Safari 必须）、-moz-user-select: none（旧 Firefox）、-ms-user-select: none（IE/旧 Edge），最后才是user-select: none；顺序颠倒或漏掉任一前缀，旧版 Safari 就会 fallback 到可选 - 目标元素是
<input>、<textarea></textarea>或带contenteditable="true"的容器——这些元素浏览器强制启用选中，CSS 无效 - 子元素显式写了
user-select: text（比如第三方组件内部的提示文案），直接覆盖父级none - 样式被更高优先级规则覆盖，用开发者工具看「Computed」面板里最终值是不是
none
移动端长按复制气泡怎么关？光靠user-select不够
iOS Safari 长按时仍可能弹出「复制/搜索」菜单，Android WebView 也可能保留光标点。必须组合使用：
-
-webkit-touch-callout: none：关闭 iOS 长按气泡菜单 -
user-select: none+ 全套前缀：阻断拖选路径 - 对可交互控件单独重置：
input, textarea, [contenteditable] { user-select: text; }，否则输入框无法聚焦 - 别用
pointer-events: none替代——它只禁点击，不影响文本选择行为
想让某段文字“看起来不可复制”，但又不破坏可访问性
纯视觉弱化比强行禁用更稳妥，尤其对屏幕阅读器友好：
- 给敏感字段加类：
.sensitive { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } - 再配
.sensitive::selection { background: transparent; color: inherit; }，让高亮瞬间“消失”，降低用户意识到“这段能选中”的概率 - 如果该字段需要键盘焦点（比如可 tab 进入），记得加
tabindex="0"和aria-label，否则辅助技术会跳过 - 注意 Shadow DOM 内部需单独声明，外部样式不会穿透
::selection 样式本身也失去意义；而如果你只改了 ::selection 却没设 user-select: none，用户照样能复制——这不是防复制，只是换了个高亮颜色。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
