加了 user-select: none 还能选中，主因是作用域错误、子元素覆盖、CSS 优先级不足、前缀缺失或浏览器兼容问题；需针对性设置并兼顾可访问性。
直接设置 user-select: none 就能禁止选中，但浏览器兼容性和继承行为常导致失效——关键不是加没加这行，而是加在哪、有没有被覆盖、是否影响可访问性。
为什么加了 user-select: none 还能选中？
常见原因不是语法错，而是作用域和层叠问题：
- 样式写在父容器上，但子元素（如
<span>、<input>）自己设置了user-select: text或默认值，会覆盖继承值 - 使用了简写属性（如
all: unset）重置后，未显式恢复user-select，导致回退到浏览器默认行为 - CSS 优先级不够，被后续更具体的规则（如
div p）或内联样式覆盖 - 某些浏览器（如旧版 Safari）对
user-select的前缀支持不一致，需补-webkit-user-select
正确写法：兼顾兼容性与可控范围
只针对需要禁用的元素设置，避免全局污染；同时覆盖主流前缀：
.no-select {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
注意：-ms-user-select 在 Edge 16+ 已不需要，但保留无害；-moz-user-select 在 Firefox 中仍必要。不要只写 user-select: none 就以为完事。
立即学习“前端免费学习笔记（深入）”；
哪些场景下不该用 user-select: none？
表面看是“防复制”，实际容易引发问题：
- 表单控件（
<input>、<textarea>）设为none会导致无法拖动光标、无法双击选词，破坏基本交互 - 屏幕阅读器用户依赖文本选择来确认上下文，盲目禁用可能降低可访问性（WCAG 不鼓励无理由禁用）
- 代码块、引用块等本该允许复制的内容，用
none反而损害用户体验 - React/Vue 组件中动态插入文本时，若父容器设了
none，子组件无法通过 CSS 覆盖（因 React 的 style 对象不支持前缀）
替代方案：比硬禁用更稳妥的做法
真要防批量复制，与其锁死选择，不如从交互层控制：
- 用
oncopy事件阻止复制：<div oncopy="return false">（注意：仅防右键/快捷键，不防截图或开发者工具） - 敏感文本用 SVG 或 Canvas 渲染（但牺牲 SEO 和可访问性，慎用）
- 服务端做水印或分段加载，让复制内容不完整
- 对纯展示型标题/标签，用
user-select: none是合理且轻量的；但只要涉及用户输入、编辑、阅读长文本，就该三思
最常被忽略的一点：移动端 Safari 在 user-select: none 下仍可能响应长按触发菜单，得配合 -webkit-touch-callout: none 才彻底隐藏。别只盯着 PC 浏览器测试。
