::selection不能禁止选中文本，它仅控制已选中文本的样式；真正禁用选择需在目标元素上写全前缀的user-select: none，而非置于::selection中。
::selection 不能禁止选中——它只控制已选中文本的样式。想禁用选择，必须用 user-select: none，不是写在 ::selection 里，而是直接作用于目标元素本身。
为什么 ::selection 里写 user-select: none 没用
浏览器会直接忽略这条声明。::selection 是伪元素，不参与 DOM 选择逻辑，只响应“已被选中”的状态。它没有 user-select 这个属性，也不影响能否选中。
-
::selection只能设color、background-color（极少数浏览器支持text-shadow） - 你在
::selection块里写的user-select、font-size、padding全部静默失效 - 错误写法示例：
.sensitive::selection { user-select: none; }—— 完全无效
真正禁用特定内容选择的写法
给需要保护的元素直接加 user-select 系列声明，且必须覆盖所有主流引擎：
- 写全前缀：
-webkit-user-select: none（iOS/Safari 必须）、-moz-user-select: none（旧 Firefox）、-ms-user-select: none（旧 Edge），最后才是user-select: none - 顺序很重要：前缀版必须在标准版之前，否则 Safari 可能跳过
- 不要用通配符拦截，比如
*:not(input, textarea)—— 易误伤表单控件，维护困难 - 正确示例：
.sensitive { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
为什么写了 user-select: none 还是能选中
常见失效场景不是语法错，而是被更高优先级规则或特殊上下文覆盖：
- 目标元素是
<input>、<textarea></textarea>或带contenteditable="true"的元素 —— 浏览器强制启用选择，user-select被无视 - 父容器没设
user-select: none，但子元素显式写了user-select: text（比如第三方 UI 组件内部），直接覆盖父级 - 样式被更具体的选择器覆盖，比如
div p.sensitive比.sensitive权重高 - 移动端长按仍弹出系统菜单：需额外加
-webkit-touch-callout: none才能隐藏 iOS 气泡
禁用后 ::selection 样式还有意义吗
基本没有。user-select: none 生效后，用户根本无法选中那段文字，::selection 就永远不会触发。很多人误以为改了 ::selection 背景色就算“防复制”，其实只是视觉障眼法 —— 文本照样能右键复制或通过 DevTools 提取。
真正容易被忽略的是：禁用选择不等于防复制；而如果你只改了 ::selection 却没关 user-select，那用户不仅可选，还能照常复制 —— 这根本不是防护，只是换了个高亮颜色而已。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
