如何通过CSS伪元素::selection属性和兼容前缀调整，让文本背景颜色不显示？

本文共计709个文字，预计阅读时间需要3分钟。

最常见原因是A+style=color:

::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 未被意外禁用。