user-select: none 有时不生效，因父元素未设置、被更高优先级样式覆盖或缺失浏览器前缀（如-webkit-user-select: none），且对input/textarea等可编辑元素无效。
为什么 user-select: none 有时不生效
直接写 user-select: none 却发现文字还是能被选中，常见原因有三：父元素没加、被更高优先级样式覆盖、或浏览器前缀缺失。尤其在旧版 Safari（-webkit-user-select: none 是必须的；Firefox 则从 69+ 开始支持无前缀版本，但低版本仍需 -moz-user-select: none。另外，如果父容器设置了 user-select: text，子元素即使设为 none 也可能被继承覆盖——CSS 的继承机制在这里不按直觉走，user-select 是可继承属性，但“禁用”不能靠子元素单方面覆盖父级“启用”。
如何让 :active 配合禁用选择不翻车
:active 本身不控制文本选择，它只定义元素被按下时的状态样式。有人误以为加 div:active { user-select: none; } 能临时禁用，其实无效——:active 伪类里设 user-select 不会改变实际选择行为，且该声明在大多数浏览器中被忽略。真正需要的是：禁用选择必须作用于常态（即非伪类），而 :active 可用来做视觉反馈，比如配合 user-select: none 让按钮按下时不闪烁光标或不触发文字高亮抖动。
- 正确做法：在常态下设置
user-select: none，再单独用:active调整背景色或 transform，避免用户误判可交互性 - 注意：移动端点击时，
:active持续时间极短，若同时依赖user-select: none防止误选，务必确保该规则已提前应用，而非靠:active动态注入 - 慎用
pointer-events: none替代：它虽能阻止所有交互，但也会让:active失效，且影响焦点、键盘导航等可访问性
全局禁用 vs 局部禁用的取舍
全局设 * { user-select: none; } 看似省事，但后果严重：输入框（<input>、<textarea></textarea>）、contenteditable 区域、甚至 <pre class="brush:php;toolbar:false;"></pre> 里的代码块都会无法选中，破坏基础可用性。更稳妥的做法是精准控制：
- 给按钮、图标、标签页等纯 UI 控件加 class，例如
.btn { -webkit-user-select: none; -moz-user-select: none; user-select: none; } - 对需要部分可选的内容，用嵌套结构隔离：外层
user-select: none，内层特定<span class="selectable"></span>显式设回user-select: text - React/Vue 项目中，避免在组件根元素上盲目绑定
onSelect={e => e.preventDefault()}，这比 CSS 方案更重、更易漏掉右键菜单或双击场景
移动端 Safari 的特殊坑
iOS Safari（尤其是 iOS 15.4–16.3）存在一个已知 bug：当元素同时满足「有 user-select: none」+「有 touchstart 监听器」+「未设置 cursor: default」时，长按可能意外触发系统菜单或放大镜。解决方式不是去掉监听器，而是补全三件套：
button {
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
cursor: default;
-webkit-tap-highlight-color: transparent;
}
其中 -webkit-tap-highlight-color: transparent 关键在于消除点击高亮干扰，否则 Safari 会把“不可选 + 可点”误解为需要辅助操作。
真正难处理的是混合内容场景——比如一个卡片里有标题（禁选）、摘要（可选）、操作按钮（禁选）。这时候别指望单条 CSS 规则一劳永逸，得靠结构分层和明确的 class 边界。细节多，但错一点，用户就可能复制出乱码或漏掉关键信息。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
