css 伪类与文本选中样式_如何通过 ::selection 改变选中文本的背景和颜色_技术教程

::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 只作用于可选中文本内容，对、无效（它们需用 ::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::selection {
background-color: #27ae60;
color: #fff;
}
/ 仅对 class="highlight" 的元素生效 /
.highlight::selection {
background-color: #e74c3c;
color: #ffffff;
}
/ 注意：不能链式写成 p.highlight::selection —— 必须是 .highlight::selection 或 p::selection /

⚠️ 警告：不要尝试用 !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 导出需求，这点必须提前告知设计同学。