user-select: none 并非强制禁用选中，而是浏览器可忽略的提示；失效主因是被表单元素强制覆盖、继承父级样式、缺少兼容前缀或 shadow dom 不穿透。
user-select: none 能禁用选中，但直接写这一句大概率失效——它不是锁，只是提示，浏览器会按需忽略。
为什么加了 user-select: none 还能选中？
失效通常不是因为你写错了，而是被覆盖、继承或绕过了：
-
<input>、<textarea></textarea>、<select></select>、<button></button>和contenteditable="true"元素会被浏览器强制允许选择，无视该声明 - 父级设了
user-select: text，子元素没显式重写，就靠继承“翻车” - 框架样式（比如 Ant Design 的
.ant-btn）带!important，盖掉了你的规则 - iOS Safari 长按时短暂高亮+弹出菜单，是渲染延迟 + 系统行为，不是 CSS 没生效
必须写的兼容写法（含前缀）
只写 user-select: none 在 Safari 14.0 以下、IE11、部分 Android WebView 中完全不认。要兜底，得一次性写全：
/* 推荐：作用于具体类，而非全局 */
.no-select {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
别用 * { user-select: none } 或 body { user-select: none } —— 它会让所有后代（包括表单控件）继承，结果输入框光标定位失败、输入法异常。
哪些元素必须显式重置为 user-select: text？
一旦你对某个容器用了 no-select 类，里面所有可交互文本区域都得手动“放行”：
-
input、textarea、select、button必须单独设user-select: text -
[contenteditable="true"]同样要显式设为text或auto - 自定义富文本容器（如
div[role="textbox"]）也得处理，否则编辑功能瘫痪
真正容易漏的是 Shadow DOM 场景：若组件用了 shadowRoot，外部样式默认不穿透，得在组件内部单独加规则。
别指望 ::selection 真正禁复制
::selection 只能改高亮样式，不能阻止选中或复制。有人用它把高亮色设成透明，试图“藏起来”，但旧版 Safari 拖动时仍会闪一下蓝底——这不是 bug，是渲染机制限制。它唯一合理用途是弱化视觉反馈，别当安全手段用。
最麻烦的从来不是怎么写那几行 CSS，而是想清楚：ID 字段该禁选，旁边「复制」按钮的文案却得让用户能选中——这种边界，得靠语义化类名（比如 .id-field vs .copy-label）一层层控制，而不是靠通配符暴力拦截。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
