::selection 不生效最常见原因是优先级不足或父元素设置 user-select: none；它不继承、仅支持 color/background-color/text-shadow 等有限属性，且需配合 ::-moz-selection 和 ::-webkit-selection 保证兼容性。
为什么 ::selection 有时完全不生效
最常见原因是 CSS 优先级不足，或者父元素设置了 user-select: none。浏览器对 ::selection 的支持虽已稳定（Chrome 1+、Firefox 1+、Safari 1.1+、Edge 12+），但它属于“弱选择器”，会被同级更具体的规则覆盖，且**不继承**父元素的样式。
- 确保没有更高优先级的
::selection规则（比如在第三方 UI 库 CSS 中已定义） - 检查目标文本容器是否设置了
user-select: none或-webkit-user-select: none—— 这会直接禁用选中，自然不会触发::selection -
::selection只作用于可选中文本内容，对<input>、<textarea></textarea>无效（它们需用::selection的变体如::-webkit-textfield-decoration-container等，但行为不统一）
::selection 支持哪些 CSS 属性
它只接受有限的几个属性：主要是颜色类和背景类。其他如 font-size、border、text-shadow 等均被忽略（部分旧版 Safari 曾支持 text-shadow，但已废弃）。
- ✅ 允许使用的：
color、background-color、background-image（仅纯色或简单渐变）、text-shadow（现代 Chrome/Firefox 已支持，但 Safari 仍不支持） - ❌ 明确不支持：
font-family、padding、margin、border、transform、opacity - 注意：
background-image在 Firefox 中仅支持线性渐变，且必须带前缀-moz-linear-gradient；Chrome 和 Safari 接受标准语法，但实际渲染效果常不如纯色稳定
如何为不同元素设置独立的选中样式
::selection 默认是全局作用的，但可通过组合选择器实现局部控制，例如只对段落或标题生效。关键是把元素选择器写在前面，再接伪类 —— 它不是独立规则，而是依附于宿主元素的修饰符。
/* 全局默认 */
::selection {
background-color: #4a90e2;
color: white;
}
<p>/<em> 仅对 <p> 内部选中的文本生效 </em>/
p::selection {
background-color: #27ae60;
color: #fff;
}</p><p>/<em> 仅对 class="highlight" 的元素生效 </em>/
.highlight::selection {
background-color: #e74c3c;
color: #ffffff;
}</p><p>/<em> 注意：不能链式写成 p.highlight::selection —— 必须是 .highlight::selection 或 p::selection </em>/</p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/xiazai/skill11815" title="CDP浏览器大师"><img
src="https://img.php.cn/upload/skill/001/246/273/6adaf20dbae7c507.jpg" alt="CDP浏览器大师" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/xiazai/skill11815" title="CDP浏览器大师">CDP浏览器大师</a>
<p>CDP浏览器大师：通过Chrome DevTools Protocol驱动已登录浏览器实现自动化任务，解决反爬封号、选择器失效、SPA路由难导航、固定sleep不准四大痛点。核心能力包括UA伪装、WebGL/Canvas指纹混淆、智能等待、动态选择器以及可视化调试。</p>
</div>
<a href="/xiazai/skill11815" title="CDP浏览器大师" 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>⚠️ 警告：不要尝试用 !important 强行覆盖内联样式或 JS 动态插入的选中样式 —— ::selection 本身不支持 !important 声明（会静默失效）。
兼容性与跨浏览器写法要点
虽然现代浏览器基本支持标准 ::selection，但历史原因导致仍需考虑前缀版本，尤其当项目需支持旧版 Safari（≤13）或旧版 Edge（≤18）。前缀只影响声明本身，不影响属性值。
- 必须同时写：
::selection（标准） +::-moz-selection（Firefox 旧版） +::-webkit-selection（旧版 WebKit，现已被标准覆盖，但加了无害） - 不需要写
*::selection—— 通配符反而降低性能，且无必要 - 如果用了 CSS-in-JS（如 styled-components），注意某些库会自动剥离
::selection规则，需显式启用或改用全局注入方式
::-moz-selection {
background-color: #4a90e2;
color: white;
}
::-webkit-selection {
background-color: #4a90e2;
color: white;
}
::selection {
background-color: #4a90e2;
color: white;
}
真正容易被忽略的是：选中样式在打印预览（@media print）中默认不生效，且无法通过媒体查询主动开启 —— 浏览器会强制使用系统默认选中色。如果产品有 PDF 导出需求，这点必须提前告知设计同学。
