user-select: none 并非万能开关，其生效受浏览器前缀缺失、样式覆盖、元素可编辑性、Shadow DOM 作用域及移动端策略等多重限制，需结合 JavaScript 和无障碍设计综合考量。
直接写 user-select: none 很可能无效，尤其在 <input>、移动端或 Shadow DOM 中——它不是开关，而是受继承、覆盖、浏览器策略和元素类型多重制约的样式声明。
为什么 user-select: none 经常不生效
常见错误现象：样式加了，但 <input> 仍可双击选中、iOS 长按还是弹出“复制”菜单、Vue 组件里 class 切换后没反应。
- 没写全前缀：
-webkit-user-select: none（Safari/iOS 必需）、-moz-user-select: none（Firefox）、-ms-user-select: none（旧 Edge），缺一不可 - 被更高优先级规则覆盖：比如某个
.form-input类里写了user-select: text，就会盖掉父级的none - 目标元素本身是可编辑的：
<input>、<textarea></textarea>、contenteditable="true"元素会无视user-select，这是浏览器强制行为 - 用在 Shadow DOM 外部时，样式不会穿透；Web Components 内必须在 shadow root 里单独声明
哪些元素该加，哪些绝对不能加
加对地方才有意义，加错地方反而破坏交互。
- ✅ 适合：
.tab-label、.chip-text、带role="button"的<span></span>、图标旁的静态状态文案、卡片标题（当点击区域本身不触发文本操作时） - ❌ 不适合：
<input>、<textarea></textarea>、段落正文、链接文字（除非是 icon-only 按钮且已用aria-hidden="true"隔离） - ⚠️ 表格列头如果支持排序，加了会让视觉反馈断连（比如点击后没高亮变化）
移动端和 React/Vue 中的典型坑
iOS Safari 和 Android Chrome 上，user-select: none 只部分生效，不能只靠 CSS。
立即学习“前端免费学习笔记（深入）”；
- 移动端必须叠加
-webkit-user-select: none，且建议用touchstart+preventDefault()抑制长按（仅限非表单区域） - 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，而是判断“这里用户到底需不需要选中”——一个按钮上的文字禁用选中很安全，但同一页面里侧边栏菜单项如果也禁了，用户想复制菜单名反馈问题就卡住了。
