user-select: none不能真正防止文本被选中，仅禁用鼠标拖选；失效主因是未写全浏览器前缀、作用于可编辑元素（如input）、或被更高优先级样式覆盖。
user-select: none 本身不能“防止文本被选中”，它只是告诉浏览器“请不要响应用户的选择操作”——但这个指令在很多常见场景下会被忽略或覆盖，直接加了没反应是常态，不是你写错了。
为什么user-select: none加了还是能选中？
最常踩的坑就三个：
- 没写全前缀：
-webkit-user-select: none（iOS Safari / Android Chrome 必需）、-moz-user-select: none（Firefox）、-ms-user-select: none（旧 Edge），缺一不可；且标准声明user-select: none必须放在最后，否则前缀规则会覆盖它 - 目标元素是可编辑的：
<input>、<textarea></textarea>、contenteditable="true"元素会无视该属性，这是浏览器强制行为，不是 bug - 样式被更高优先级规则覆盖：比如第三方组件内部写了
user-select: text，或者你用了.card { user-select: none; }但正文是<p></p>标签，没继承到（user-select不完全继承，尤其在绝对定位子元素上 Firefox 表现不同）
移动端长按仍弹出“复制”菜单怎么办？
仅靠user-select系列声明远远不够。iOS Safari 对长按行为有独立控制逻辑：
- 必须加上
-webkit-touch-callout: none，且要放在-webkit-user-select: none之前，否则某些 WebView 会忽略 -
<img>的alt文本在 iOS 上不受user-select控制，长按时仍可能高亮——得把alt设为空字符串，或改用背景图 - 若目标区域纯展示、无交互需求，可叠加
touch-action: manipulation减少长按响应延迟；但若需点击，别乱加pointer-events: none，它会让所有点击失效
全局禁用后，<input>输不了字了？
这是最典型的误用后果。一旦你在body或根容器上写了user-select: none，所有后代都会继承，包括表单控件——结果光标无法定位、双击失灵、输入法异常。
必须显式重置：
input, textarea, select, button { user-select: text; }[contenteditable="true"] { user-select: text; }- 如果用了自定义富文本容器（如
div[role="textbox"]），同样要加user-select: text
别指望用!important粗暴覆盖，优先靠选择器权重，比如.no-select * { user-select: none; }比.no-select { user-select: none; }更彻底，但代价是更难精准排除表单元素。
Shadow DOM 和 React/Vue 中的特殊表现
外部 CSS 默认不穿透 Shadow DOM，Web Components 内部必须单独声明user-select: none；React/Vue 动态渲染时，class 切换可能不触发子组件重绘（尤其富文本编辑器），导致样式未生效。
实操建议：
- React 中可用
key={isSelectable.toString()}强制刷新 DOM - Vue 中避免用
v-show切换，改用v-if或确保响应式数据真实变化（比如用ref而非普通对象属性） - 伪元素
::before/::after上直接写user-select: none完全无效，得作用于宿主元素本身
真正难处理的从来不是“怎么加”，而是“加在哪、加给谁、加完怎么收场”。尤其当页面混用原生表单、第三方组件和自定义 Web Component 时，user-select更像是一个需要逐层校验的样式契约，而不是一键开关。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
