user-select: none无效最常见原因是未写全浏览器前缀或被更高优先级样式覆盖；、、contenteditable元素强制忽略该属性；子元素显式设user-select: text会覆盖继承值；伪元素需作用于宿主元素而非自身；Shadow DOM需内部单独声明；全局设置后须显式重置表单控件为user-select: text。
user-select: none 为什么加了还无效
最常见原因是没写全浏览器前缀，或者被更高优先级样式覆盖。Chrome 和 Firefox 现代版本认 user-select: none，但 iOS Safari 必须有 -webkit-user-select: none，旧版 Firefox 还要 -moz-user-select: none，IE/Edge 旧版依赖 -ms-user-select: none。这四条必须都写，且标准写法 user-select: none 得放在最后，否则会被前缀规则覆盖。
另一个高频失效点是目标元素本身可编辑：<input>、<textarea></textarea>、contenteditable="true" 元素会无视该属性——这是浏览器强制行为，不是 bug。还有就是子元素显式写了 user-select: text，比如第三方组件库内部设了这个值，直接盖掉你的父级设置。
- 用开发者工具检查「Computed」面板里的
user-select实际值，确认生效的是哪条规则 - 避免用
!important粗暴覆盖，优先靠选择器权重，例如.no-select * { user-select: none; }比.no-select { user-select: none; }更彻底 - Shadow DOM 外部样式默认不穿透，Web Components 内必须在 shadow root 中单独声明
哪些元素必须显式重置为 user-select: text
一旦你在 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; } 才管用。
移动端和 React/Vue 中的典型坑
iOS Safari 和 Android Chrome 对 user-select: none 支持更弱，仅靠 CSS 不够。除了补全前缀，还需注意：
- 移动端长按可能仍弹出“复制”菜单，建议配合
touch-action: manipulation修复响应 - React 中用
useState切换 class，若子组件是 Draft.js 或 Tiptap 这类富文本渲染器，DOM 可能没重绘，样式不生效；可加key={isSelectable.toString()}强制刷新 - Vue 中用
v-show切换无效（display: none不移除样式），换成v-if或确保响应式数据确实变化（比如用ref而非普通对象属性）
另外，Safari 旧版本（14.0 及更早）对 input 和 textarea 内部文本无效，哪怕父级设了也没用；Firefox 中设在 body 上甚至会连地址栏拖拽都禁掉（少见但真会发生）。
真正难处理的不是加 CSS，而是判断该不该加
加错位置会直接破坏可用性：表格列头若支持排序，加了会导致点击后无视觉反馈；按钮文字加了会让键盘用户无法通过 Ctrl+A 快速定位；侧边栏菜单项加了，用户想复制菜单名反馈问题就卡住了。
适合加的地方很窄：仅限纯装饰性或非文本内容，比如 .tab-label、.chip-text、图标旁静态状态文案、卡片标题（当点击区域本身不触发文本操作时）。不适合加的地方很明确：<input>、<textarea></textarea>、段落正文、链接文字（除非是 icon-only 按钮且已用 aria-hidden="true" 隔离）。
它根本防不住什么——右键“查看网页源代码”、网络面板看 HTML 响应、截图 OCR、开发者工具删掉这行 CSS，文本全都能拿到。真正要做的，是厘清“这里用户到底需不需要选中”，而不是找一行万能开关。
