::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>或带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,那用户不仅可选,还能照常复制 —— 这根本不是防护,只是换了个高亮颜色而已。


















