user-select: none 有时不生效是因为未直接作用于目标元素、被更高优先级样式覆盖，或表单控件（如 input）默认忽略该属性；需检查继承、覆盖及浏览器兼容性。
user-select: none 为什么有时不生效
直接加 user-select: none 却还能选中文字？大概率是样式没覆盖到目标元素，或者被更具体的 CSS 规则、内联样式或浏览器默认行为干扰了。
常见错误现象：user-select: none 写在父容器上，但子元素（比如 <span></span> 或 <input>）自己声明了 user-select: text，就会覆盖继承值；另外，<input>、<textarea></textarea> 这类可编辑表单控件默认忽略 user-select，强行设也无效。
- 必须作用于实际要禁用选择的元素本身，不能只靠父级继承
- 检查是否被
!important或更高优先级选择器覆盖（可用浏览器开发者工具「Computed」面板验证最终值） - 对表单控件，禁用文本选择不是靠
user-select，而是用pointer-events: none（副作用大，慎用）或改交互逻辑
跨浏览器兼容性要注意哪些值
user-select 的取值在不同浏览器里差异不小，尤其老版本 Safari 和 IE 完全不支持标准写法。
使用场景：需要兼容 Chrome 54+、Firefox 68+、Safari 15.4+、Edge 79+ 的现代项目，可以只写标准值；若需支持 Safari
- 标准值：
none、text、all、contain（注意：contain在 Safari 中直到 15.4 才支持） - 必须加前缀的情况：
-webkit-user-select: none（Safari ≤ 15.3、Chrome ≤ 53）、-moz-user-select: none（Firefox ≤ 67） - IE/Edge Legacy 只认
-ms-user-select: none，但该前缀在 Edge 16+ 已废弃，且仅部分生效
禁用选择后影响复制和焦点操作吗
禁用选择本身不阻止 focus、click 或键盘操作，但它会间接破坏依赖文本选中的功能，比如「双击选词」「拖拽选择后右键复制」——这些操作在 user-select: none 下直接失效。
性能 / 兼容性影响：几乎无性能开销，但容易引发可访问性问题。屏幕阅读器一般不受影响，但键盘用户若习惯用 Shift + 方向键 选中文本进行操作，就会卡住。
- 不要全局设置
body { user-select: none }，除非整个页面确实不需要任何文本操作 - 如果只是防止误选（如按钮文字），优先考虑用
unselectable="on"（IE 专有属性，仅作降级）或 JS 监听selectstart事件并preventDefault() - 对可聚焦元素（如
<button></button>、<a></a>），禁用选择后仍应确保键盘导航和屏幕阅读器标签完整
React/Vue 里动态控制 user-select 的坑
在框架中用内联样式或 class 切换 user-select，最容易踩的坑是样式未及时更新，或条件判断漏掉边界情况。
参数差异：CSS 属性名是 userSelect（驼峰），不是 user-select；Vue 的 :style 绑定和 React 的 style={} 都要求这个格式。
- React 示例：
style={{ userSelect: isEditable ? 'text' : 'none' }}，别写成'user-select'键名 - Vue 示例：
:style="{ userSelect: isActive ? 'all' : 'none' }"，避免用字符串拼接 class 导致样式冲突 - 注意 SSR 场景下，服务端渲染时
user-select不起作用（无 DOM），首次 hydration 后才生效，可能造成闪动
selectstart，而不是一刀切。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
