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;"></code> 里的代码块都会无法选中，破坏基础可用性。更稳妥的做法是精准控制：</p><ul><li>给按钮、图标、标签页等纯 UI 控件加 class，例如 <code>.btn { -webkit-user-select: none; -moz-user-select: none; user-select: none; }</code></li><li>对需要部分可选的内容，用嵌套结构隔离：外层 <code>user-select: none</code>，内层特定 <code><span class="selectable"></code> 显式设回 <code>user-select: text</code></li><li>React/Vue 项目中，避免在组件根元素上盲目绑定 <code>onSelect={e => e.preventDefault()}</code>，这比 CSS 方案更重、更易漏掉右键菜单或双击场景</li></ul><H3>移动端 Safari 的特殊坑</H3><p>iOS Safari（尤其是 iOS 15.4–16.3）存在一个已知 bug：当元素同时满足「有 <code>user-select: none</code>」+「有 <code>touchstart</code> 监听器」+「未设置 <code>cursor: default</code>」时，长按可能意外触发系统菜单或放大镜。解决方式不是去掉监听器，而是补全三件套：</p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板"><img
src="https://img.php.cn/upload/webcode/000/000/018/178607072210981.jpg" alt="CSS婚礼策划服务机构宣传网站模板" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板">CSS婚礼策划服务机构宣传网站模板</a>
<p>CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。</p>
</div>
<a href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p><pre class="brush:php;toolbar:false;">button {
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
cursor: default;
-webkit-tap-highlight-color: transparent;
}</pre><p>其中 <code>-webkit-tap-highlight-color: transparent 关键在于消除点击高亮干扰，否则 Safari 会把“不可选 + 可点”误解为需要辅助操作。
真正难处理的是混合内容场景——比如一个卡片里有标题（禁选）、摘要（可选）、操作按钮（禁选）。这时候别指望单条 CSS 规则一劳永逸，得靠结构分层和明确的 class 边界。细节多，但错一点，用户就可能复制出乱码或漏掉关键信息。
