user-select: none 失效的三大主因是样式未作用于目标元素、被高优先级规则覆盖、或目标为浏览器强制可选元素；需写全四套前缀、避开表单控件硬性豁免，并结合伪元素、js 或 touch-action 综合处理。
直接写 user-select: none 能禁选，但多数失效不是因为不会写，而是没写对位置、没压住优先级、或碰上了浏览器“硬性豁免”元素。
为什么 user-select: none 写了却还能选中
常见原因有三个：样式没落到真实目标元素上、被更高权重规则覆盖、目标本身是浏览器强制允许选择的元素。
- 别只给父容器设
user-select: none，<span></span>或<p></p>子元素若自己带user-select: text（比如某些 UI 库默认注入），就会覆盖继承值 - 用开发者工具「Computed」面板查最终生效值，确认没被
!important或更具体的选择器（如.card .titlevs.title）干掉 -
<input>、<textarea></textarea>、contenteditable="true"元素无视user-select—— 这是浏览器策略，加前缀或 JS 拦截都无效
必须写的四套前缀才能真生效
仅写标准 user-select: none 在 Safari 14.0 及更早、旧版 Firefox 和 IE/Edge Legacy 中会失效。
- 完整写法必须包含：
-webkit-user-select: none（Safari/iOS）、-moz-user-select: none（Firefox）、-ms-user-select: none（IE10+/旧 Edge）、user-select: none（现代标准） - 顺序无关，但漏掉任一前缀，对应内核下就可能回退到默认行为
- 不要用
user-select: all去“局部启用”，它在部分 Android WebView 下会触发双击全选异常，且不支持跨元素边界控制
表单控件和可编辑区域怎么处理
对 <input>、<textarea></textarea> 或 contenteditable 容器，user-select 属性完全无效，得换思路。
- 如果只是想禁 placeholder 文字被选中，别动 input 本身，改用伪元素：
input::placeholder { user-select: none }（注意各浏览器伪元素名不同） - 对
contenteditable元素，显式重置：[contenteditable] { user-select: text !important; }，否则某些浏览器会按contain行为处理 - 若真要阻止输入框内文本被选，只能靠 JS 拦截：
element.addEventListener('selectstart', e => e.preventDefault())，但需排除 focus 状态，否则破坏键盘导航
移动端长按菜单还在？这不是 CSS 能单独解决的
iOS Safari 和部分 Android WebView 中，user-select: none 仅影响拖选高亮，不抑制长按弹出的「复制/搜索」菜单。
- 必须配合
-webkit-user-select: none+touch-action: manipulation（减少长按判定延迟） - iOS 上
selectstart事件根本不触发，得监听touchstart并preventDefault()，但仅限非输入区域，否则会卡住焦点切换 - 微信 X5、QQ TRIDENT 等 WebView 内核对
user-select解析不一致，上线前务必在真机上测长按行为，不能只信 Chrome DevTools 模拟
真正难的从来不是加那几行 CSS，而是判断“用户在这里是否需要复制”——按钮文字禁了没问题，但侧边栏菜单项禁了，用户反馈问题时连菜单名都复制不了。每次加 user-select: none 前，先问一句：这个文字，是不是真的不该被任何人选中？
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
