user-select: none 失效最常见原因是漏写浏览器前缀、作用于可编辑元素（如input、textarea、contenteditable）或被子元素显式覆盖；须四条前缀全写且标准写法置后，并手动重置交互元素为user-select: text。
为什么加了 user-select: none 还能选中文字
最常见不是写错了，而是漏了三件事：没写全前缀、作用在了不该禁用的元素上、被子元素显式覆盖。比如只写了 user-select: none，但 iOS Safari 必须靠 -webkit-user-select: none 才生效；又或者父容器设了 none，但里面一个按钮用了第三方 UI 库，其内部 span 显式写了 user-select: text，直接盖掉继承值。
还有种典型失效：给 <input> 或 <textarea></textarea> 加这个属性——浏览器会无视它，这是规范行为，不是 bug。contenteditable 元素同理。
怎么写才真正生效（含前缀与顺序）
必须四条都写，且标准写法放在最后，否则前缀规则会覆盖它：
element {
-webkit-user-select: none; /* Safari, iOS */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* IE/旧 Edge */
user-select: none; /* 标准，放最后 */
}
别用 !important 粗暴覆盖，优先提升选择器权重。例如用 .no-select > * 比 .no-select 更容易压住子元素的局部声明。
移动端长按仍弹“复制”菜单？补一句 -webkit-touch-callout: none（仅对非表单元素有效）。
哪些元素必须手动重置为可选
一旦你在根容器或 body 上设了 user-select: none，所有后代都会继承——包括你根本不想锁死的交互控件。这些必须显式恢复：
-
input, textarea, select, button→ 设user-select: text -
[contenteditable="true"]和自定义富文本宿主（如div[role="textbox"]）→ 同样设user-select: text -
code, pre→ 建议保留可选，方便用户复制代码片段 - 伪元素
::before/::after不响应user-select，得作用于其宿主元素，比如.icon { user-select: none; }
React/Vue 中动态切换 class 为什么没反应
状态变了，class 名也更新了，但 DOM 没重绘，样式自然不生效。常见于富文本组件（Tiptap、Draft.js）或 Shadow DOM 内部：
- React：用
key强制重建节点，比如key={isProtected.toString()} - Vue：避免用
v-show（只是 display 切换），改用v-if；确保响应式数据是 ref 或 reactive，而非普通对象属性 - Web Components：外部样式默认不穿透，
user-select必须在 shadow root 里单独声明 - 监听
selectstart事件做兜底（注意：该事件不冒泡，不能绑在document上）
真正难处理的不是“怎么禁”，而是“禁到哪为止”——误伤输入框光标、破坏屏幕阅读器上下文、让测试人员无法快速选中报错文案，这些比误选文字更伤体验。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
