user-select: none 仅禁用鼠标选中，非安全机制；失效主因是前缀缺失、表单元素强制忽略、子元素覆盖、shadow dom 不穿透及伪元素无效。
user-select: none 能阻止鼠标拖选、双击、三击等主动选中行为，但无法防右键复制、Ctrl+C、开发者工具查看源码或截图 OCR——它只是交互层的视觉限制，不是安全机制。
为什么加了 user-select: none 还是能选中
常见失效原因不是写法错，而是被其他规则覆盖或浏览器策略拦截：
- 没加全前缀：
-webkit-user-select: none（iOS Safari / 旧 Chrome 必需）、-moz-user-select: none（Firefox 68 及更早）、-ms-user-select: none（IE10+ / 旧 Edge）；标准写法user-select: none必须放在最后，否则会被前缀规则覆盖 -
<input>、<textarea></textarea>、contenteditable="true"元素会无视该属性——这是浏览器强制行为，非 bug - 子元素显式声明了
user-select: text或user-select: auto，会覆盖继承值；第三方组件库（如 Ant Design）内部常设此值，穿透你的父级设置 - 用在 Shadow DOM 外部时，样式不穿透；Web Components 内必须在 shadow root 中单独声明
伪元素内容怎么禁选
直接给 ::before 或 ::after 写 user-select: none 完全无效——伪元素不参与 DOM 选择逻辑，也不继承该属性。生效前提是作用于其宿主元素：
- ✅ 正确：
.icon { user-select: none; }+.icon::before { content: "→"; } - ❌ 错误：
.icon::before { content: "→"; user-select: none; }（浏览器忽略） - ⚠️ 若宿主内含可编辑文本（如
contenteditable区域），需单独对子元素重置：.icon [contenteditable] { user-select: text; }
哪些地方该加，哪些绝对不该加
加错位置会直接破坏可用性，尤其影响键盘导航和屏幕阅读器：
- ✅ 合适场景：标签页标题（
.tab-label）、状态徽标（.chip-text）、图标旁静态文案、卡片标题（点击区域不依赖文本操作时） - ❌ 禁止场景：
<input>和<textarea></textarea>（默认忽略）、段落正文、链接文字（除非是 icon-only 按钮且已用aria-hidden="true"隔离） - ⚠️ 表格列头若支持排序，加了会导致点击后无视觉反馈（如高亮变化中断）；React/Vue 中用内联样式
style={{ userSelect: 'none' }}时，SSR 渲染可能丢弃该声明，建议改用 class
移动端和混合交互下的典型坑
iOS Safari 和 Android Chrome 对 user-select: none 的支持更弱，仅靠 CSS 不够：
- 必须同时写
-webkit-user-select: none和user-select: none；仅后者在部分安卓 WebView 或老 iOS Safari 中会失效 - 长按仍可能弹出“复制”菜单——需额外监听
touchstart并调用e.preventDefault()（仅限非表单区域，避免干扰输入） - 带图标的按钮是高频翻车点：图标用伪元素生成，文字要禁选，但图标又要响应点击。得拆开控制——文字层设
user-select: none，图标层单独绑定事件，否则容易出现点击区域错位 - 不要混用
pointer-events: none：它会让整个元素 click 事件失效，和user-select: none目标完全不同
真正难处理的是富文本区域或自定义编辑器——那里必须结合 onselectstart 事件和 preventDefault()，user-select 单独撑不住。另外，所有这些干预都可被开发者工具临时禁用，别把它当防盗门用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
