user-select: none无效最常见原因是未写全浏览器前缀或被更高优先级样式覆盖；、、contenteditable元素强制忽略该属性；子元素显式设user-select: text会覆盖继承值；伪元素需作用于宿主元素而非自身；shadow dom需内部单独声明；全局设置后须显式重置表单控件为user-select: text。
user-select: none 为什么加了还无效
最常见原因不是写错了，而是没写全前缀或被子元素覆盖。iOS Safari 必须有 -webkit-user-select: none，Firefox 仍需 -moz-user-select: none，旧版 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; } 更彻底。
哪些元素必须显式重置为 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; }才管用
移动端和 Shadow DOM 中的典型坑
iOS Safari 和 Android Chrome 对 user-select: none 支持更弱，仅靠 CSS 不够。除了补全前缀，还需注意：
- 移动端长按可能仍弹出“复制”菜单，建议配合
touch-action: manipulation修复响应 - Shadow DOM 外部样式默认不穿透，Web Components 内必须在
shadowRoot中单独声明 - React 中用
useState切换no-selectclass，若子组件是富文本渲染器（如 Draft.js、Tiptap），DOM 可能没重绘，样式不生效；可加key={isSelectable.toString()}强制刷新 - Vue 中用
v-show切换样式无效（display: none不移除样式），换成v-if或确保响应式数据确实变化（比如用ref而非普通对象属性）
它根本防不住什么，你得心里有数
user-select: none 是一道“礼貌性门槛”，不是安全锁。
- 用户打开开发者工具，删掉这行 CSS 或临时禁用样式，立刻恢复可选
- 通过“查看页面源代码”或网络面板（Network → HTML 响应）仍能拿到原始文本
- 右键菜单里的“复制”选项、
Ctrl+C快捷键、截图 OCR 等方式完全不受影响 - 屏幕阅读器、键盘导航等辅助功能可能因此受限，需评估无障碍影响
真正难的不是写这行 CSS，而是判断“这里用户到底需不需要选”——比如数据卡片里的 ID 字段确实该禁选，但旁边「复制」按钮的文案却需要用户能选中以手动复制。这类边界情况，得靠语义化结构 + 精确的选择器来收口，而不是一刀切。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
