user-select: none 非强制锁，常因表单元素、继承、优先级、ios延迟或旧浏览器缺失前缀而失效；需全前缀书写、避免全局设置、结合js防contenteditable、兼顾可访问性。
直接加 user-select: none 通常不够，尤其在表单、移动端或旧浏览器里——它只是个提示，不是强制锁。
为什么 user-select: none 有时完全没用
常见原因不是语法错，而是它被绕过了：
- 目标元素是
<input>、<textarea></textarea>或带contenteditable="true"的元素，浏览器会无视该声明 - 父级设了
user-select: text，子元素又没显式覆盖，继承导致失效（user-select是可继承属性） - 样式被更高优先级规则覆盖，比如某个框架的 class 带
!important，或内联样式直接写了user-select: text - 在 iOS Safari 上，长按后仍可能短暂高亮，甚至弹出“复制”菜单——这不是 bug，是渲染延迟 + 系统行为干预
必须写的兼容写法（含前缀）
只写 user-select: none 在 Safari 14.0 以下、IE11、部分 Android WebView 中会彻底失效。要兜底，得一次性写全：
element {
-webkit-user-select: none; /* Safari & iOS */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* IE10+ / Edge */
user-select: none; /* 标准 */
}
注意：-khtml-user-select 已淘汰，不用加；body { user-select: none } 不推荐——它会影响所有后代，包括你忘了重置的 input，结果用户连输入框都选不了文字。
React/Vue 中动态控制的坑
用状态切换 class 或内联样式时，容易忽略 DOM 渲染时机和穿透限制：
- Vue 的 scoped style 或 CSS-in-JS 可能因选择器权重不足，压不住第三方组件的样式，需加
:deep(.target) { user-select: none }或!important（仅限此处实用） - React 中用
useState控制 class，但富文本容器（如 Tiptap、Quill）会主动重置user-select，得在它们的 wrapper 上再覆盖一遍 - 若禁的是
contenteditable区域，CSS 失效，必须配合 JS：element.addEventListener('selectstart', e => e.preventDefault())，且 iOS 需额外监听touchstart
真正难的不是加这行 CSS，而是判断“这里用户到底需不需要选中”
按钮上的状态标签（如 .status-badge）禁选很安全；但侧边栏菜单项、表格列头、带排序图标的文字一旦禁了，用户反馈问题时连复制菜单名都做不到。更麻烦的是混合场景：图标用伪元素生成，文字要禁选，但图标本身还要响应点击——这时候得拆开控制，文字层设 user-select: none，图标层单独绑定事件，稍不留神就点击错位。可访问性也不能漏：屏幕阅读器可能跳过 user-select: none 元素，得补 role="presentation" 或 aria-live 显式声明意图。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
