最直接原因是未写全浏览器前缀：iOS Safari 必须加-webkit-user-select: none，旧版 Firefox 需-moz-user-select: none，IE/Edge 旧版依赖-ms-user-select: none，且标准声明user-select: none须置于最后。
为什么 user-select: none 在 Safari 或旧版 Firefox 里不生效
最直接的原因是没写全浏览器前缀。现代 Chrome/Edge 认 user-select: none，但 iOS Safari 必须有 -webkit-user-select: none，Firefox 旧版本（-moz-user-select: none，IE/Edge Legacy 需要 -ms-user-select: none。这四条必须同时存在，且标准声明要放在最后，否则会被前缀规则覆盖。
另一个高频失效点是目标元素本身可编辑：<input>、<textarea></textarea>、contenteditable="true" 元素会强制忽略该属性——这是浏览器规范行为，不是 bug。用开发者工具检查「Computed」面板里的 user-select 实际值，确认生效的是哪条规则。
如何安全地全局禁用文本选中而不影响表单控件
在 body 或根容器上直接写 user-select: none 很危险：所有子元素都会继承，包括 <input>、<textarea></textarea>、<select></select>、<button></button>，导致光标无法定位、输入法异常、点击失焦。
必须显式重置关键控件：
input, textarea, select, button { user-select: text; }[contenteditable="true"] { user-select: text; }- 若用了自定义富文本容器（如
div[role="textbox"]），同样要设为text或auto
伪元素（::before/::after）不参与 DOM 选择逻辑，给它们直接写 user-select: none 完全无效；得作用于其宿主元素，比如 .icon { user-select: none; } 才管用。
移动端长按仍弹出“复制”菜单怎么办
iOS Safari 和部分 Android Chrome 对 user-select: none 支持偏弱，仅靠 CSS 不够。除了补全四套前缀，还需配合 touch-action: manipulation 来抑制长按响应，减少系统级菜单触发概率。
注意：pointer-events: none 虽能彻底阻止选中，但会让所有鼠标/触控事件失效（包括点击、focus），慎用。如果只是想防误选又保留交互，优先用 user-select + touch-action 组合。
另外，<option></option> 元素始终可选，这是浏览器限制，任何 CSS 都无法绕过。
React/Vue 中动态切换 user-select 容易失效的根源
在组件里用 state 控制 class 切换 user-select，容易忽略 DOM 渲染时机。比如 React 中 useState 更新了 class，但子组件（尤其是富文本或第三方库封装的区域）没重新渲染，样式就不会生效。
更稳妥的做法是：
- 用内联样式直接绑定：
style={{ userSelect: isSelectable ? 'text' : 'none' }} - 确保状态变更后，相关 DOM 节点确实被重新挂载或更新（必要时加
key强制刷新） - 避免在 Shadow DOM 外部样式穿透控制，Web Components 内必须在 shadow root 中单独声明
复杂点在于：不同浏览器对继承的处理不一致（比如 Firefox 中 -moz-user-select 不被绝对定位元素继承，而 WebKit 会），所以不要依赖父级继承，关键节点建议显式声明。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
