user-select: none 有时无效，主要因样式被覆盖、未命中目标元素、不继承性及表单控件原生行为优先；需显式设置、配合 onselectstart 或 readonly，并区分 pointer-events: none 的交互影响。
user-select: none 为什么有时候不起作用
直接加 user-select: none 却仍能选中文本？大概率是样式被覆盖或没命中目标元素。这个属性不继承，父元素设了，子元素默认还是可选的；而且像 input、textarea 这类表单控件，原生行为优先级更高，CSS 压不住。
实操建议：
- 用浏览器开发者工具检查真实生效的样式，确认
user-select没被inherit或其他规则重置 - 对需要禁选的文本容器（比如按钮文字、卡片标题），显式写在该元素上，别只靠父级设置
- 遇到
input类元素，不能只靠 CSS：得配合onselectstart事件阻止，或改用readonly+ 样式模拟 - 注意 Safari 旧版本（user-select: none 在 flex/grid 子项中支持不稳定，必要时加
-webkit-user-select: none
哪些场景下不该盲目禁用选中
禁用选中不是体验优化，而是交互干预。用户复制错误提示、调试时取 DOM 文本、读屏软件抓取内容，都依赖选中能力。
典型误用场景：
- 整页加
user-select: none—— 会阻断所有复制，包括用户想分享的链接或报错信息 - 在可编辑区域（如富文本编辑器内部）禁用，导致无法定位光标、无法拖拽调整内容顺序
- 为“防爬”加
user-select: none—— 完全无效，爬虫不走渲染层，且用户按 Ctrl+U 一样看源码
真正合理的情况只有：纯视觉装饰文字（如图标旁的“NEW”徽章）、按钮标签（避免点击时意外拖选）、数据卡片里的非文本区块（如进度条背景）。
兼容性与 fallback 方案怎么写
user-select 在现代浏览器里基本没问题，但 IE10–11 只认 -ms-user-select，而旧版 Chrome/Safari 需要 -webkit-user-select。不过现在多数项目已不用保 IE，重点反而是别让旧前缀干扰新标准。
推荐写法：
button .label {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
注意点：
- 前缀必须按顺序写，把标准属性放最后，否则会被前缀规则覆盖
- 不要写
user-select: auto作 fallback —— 它不是兜底值，而是默认行为，写了等于没写 - 如果项目需兼容极老环境（如 Electron 旧内核），可加 JS 补丁：
element.onselectstart = () => false，但仅用于兜底，勿主用
和 pointer-events: none 的区别别搞混
user-select: none 只管文本选中，不影响点击、hover、焦点等任何交互；而 pointer-events: none 是彻底禁掉鼠标事件，连 click 都触发不了，还会穿透到下层元素。
常见混淆现象：
- 加了
pointer-events: none后发现按钮点不动了，以为是user-select搞的鬼 - 想禁选又保留点击，却误用了
pointer-events，结果交互全废 - 在 tooltip 或弹窗上同时设两者，导致内容既不能选也不能关——因为关闭按钮被
pointer-events: none拦截了
记住：要锁文本，只动 user-select；要锁交互，才碰 pointer-events。两者混合用时，务必分开控制层级，别堆在同一个元素上。
最常被忽略的一点：禁选后，键盘焦点（Tab）和屏幕阅读器仍能访问内容。如果真想隐藏语义，得配 aria-hidden="true" 或 visibility: hidden，但这就超出 user-select 的职责了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
