Chrome/Edge 默认继承 ::selection 的 color 和 background-color，Firefox 则重置为默认黑字白底；需显式声明样式，Safari 限制最多，旧前缀已废弃，深色模式下推荐用 CSS 变量配合媒体查询。
Chrome 和 Firefox 对 ::selection 的继承行为不同
Chrome（包括新版 Edge）默认让 ::selection 继承父元素的 color 和 background-color，而 Firefox 则几乎完全重置——比如父元素设了深色文字 + 浅色背景，Firefox 里选中后可能变成黑字白底，反差极强。这不是 bug，是规范留白导致的实现差异。
解决办法不是“统一颜色”，而是显式声明所有关键样式：
::selection {
color: #fff;
background-color: #007acc;
/* Firefox 需要单独指定，否则可能忽略 */
}
<p>/<em> Chrome/Edge 下若父元素有 transform 或 isolation，可能触发图层分离，导致 ::selection 不生效 </em>/
::selection 的兼容前缀现在还用不用
旧项目里常看到 ::-webkit-selection 和 ::-moz-selection，但实际已无必要：
-
::-webkit-selection：仅 Safari ≤ 15.4 和旧版 Chrome 需要，当前 Chrome 120+、Edge 120+ 已完全支持无前缀::selection -
::-moz-selection：Firefox 自 61 版本（2018 年）起就弃用，强行写上反而可能被忽略 - 真正需要前缀的是
::selection的子属性，比如text-shadow在 Safari 中仍需-webkit-text-fill-color配合才能生效
Safari 下 ::selection 失效的常见原因
Safari（尤其是 iOS/iPadOS）对 ::selection 限制最多，以下情况会直接禁用该伪元素：
立即学习“前端免费学习笔记（深入）”；
DMap GL地图JSAPI（dmapgl）开发指南。用于编写、审查、调试 DMap 地图 API 代码，涵盖地图初始化、覆盖物渲染、图层管理、事件处理、控件交互等任务。当用户提及 dmap、dmapgl、jsapi‑gl 或相关地图开发需求时自动触发。
- 父容器设置了
user-select: none或-webkit-user-select: none - 文本在
<input>、<textarea>内部（这些元素不支持::selection，只能用::-webkit-input-placeholder类似方案间接处理） - CSS 中用了未加前缀的
backdrop-filter或clip-path等新特性，触发渲染路径切换，导致选择样式丢失
验证方式：临时移除疑似干扰规则，或用 Safari 开发者工具的 “Styles” 面板检查 ::selection 是否被标记为 “invalid”。
字体颜色在深色模式下翻车怎么办
系统深色模式下，用户选中文本时，浏览器可能强制覆盖部分样式（特别是 background-color）。单纯依赖 @media (prefers-color-scheme: dark) 不够可靠，因为 ::selection 本身不响应媒体查询变化。
更稳妥的做法是用 CSS 自定义属性 + JS 监听：
:root {
--selection-bg: #007acc;
--selection-color: #fff;
}
<p>@media (prefers-color-scheme: dark) {
:root {
--selection-bg: #2563eb;
--selection-color: #f9fafb;
}
}</p><p>::selection {
background-color: var(--selection-bg);
color: var(--selection-color);
}
注意：Safari 对 var() 在 ::selection 中的支持直到 iOS 17.4 才稳定，低版本建议 fallback 到固定值。
最麻烦的其实是 SVG 内文本或 Canvas 渲染文本——它们根本不支持 ::selection，得换思路，比如用可编辑 contenteditable 区域包裹。
