<p>::selection 背景色失效最常见原因是浏览器默认样式覆盖或优先级不足，且仅支持 color、background-color、text-shadow（仅 Firefox）、cursor 四个属性，必须同时写标准、-moz-、-webkit- 三版本。</p>
为什么 ::selection 设置背景色没生效
最常见原因是浏览器默认样式覆盖或 CSS 优先级不足，::selection 是一个低优先级伪元素，且只支持有限的几个 CSS 属性。它**不支持 border、padding、margin、text-shadow 或大多数颜色以外的装饰属性**。如果写了 background-color 却没显示，大概率是被更具体的规则（比如父级 color 或 background）干扰，或者用了不被支持的值（如 transparent 在部分旧版 Safari 中会退为默认蓝底）。
::selection 支持哪些属性和值
仅允许使用以下 4 个属性，且必须是内联可继承的「文本渲染类」值：
-
color：文字颜色（支持所有合法颜色值） -
background-color：背景色（注意：transparent在 Safari ≤ 15.6 中可能失效，建议用rgba(0,0,0,0)或明确色值替代） -
text-shadow：仅在 Firefox 中完全支持；Chrome/Safari 不支持该属性用于::selection -
cursor：极少数场景可用，但行为不稳定，不推荐依赖
其他如 font-size、line-height、background-image 均会被忽略。
必须加 -webkit- 前缀才能生效
Chrome、Safari、Edge（基于 Chromium）目前仍要求显式声明带前缀的版本，否则 ::selection 规则会被直接丢弃。标准写法必须同时提供：
立即学习“前端免费学习笔记（深入）”；
::selection {
background-color: #ff9e6d;
color: white;
}
::-moz-selection {
background-color: #ff9e6d;
color: white;
}
::-webkit-selection {
background-color: #ff9e6d;
color: white;
}
关键点：
-
::-moz-selection仅 Firefox 需要，且不支持text-shadow -
::-webkit-selection不是可选——没有它，Chrome/Safari 下完全无效 - 三者顺序无关，但建议把标准写法放最前，便于未来降级兼容
- 不能合并简写：
::selection, ::-webkit-selection这种组合选择器会导致整条规则被忽略
容易被忽略的 DOM 和继承陷阱
::selection 的样式作用域受元素层级和 user-select 控制，不是所有文本都能被自定义：
- 如果父容器设置了
user-select: none，子元素即使设了user-select: text，::selection也不会触发 - 在
<input>或<textarea></textarea>中，::selection仅对用户选中的内容生效，且原生控件内部样式优先级高，需用!important才可能覆盖（不推荐，稳定性差） - SVG 文本节点（
<text>）不支持::selection，必须用 JS 模拟选区 - 若页面启用了
forced-colors: active（Windows 高对比度模式），所有::selection样式会被系统强制替换
真正稳定的用法，只适用于普通 HTML 流式文本块（<p>、<div>、<span>），且确保其 user-select 未被意外禁用。
