CSS中如何设置选中文本颜色样式

CSS中的`::selection`伪元素看似简单，实则暗藏诸多陷阱：它完全不继承父级颜色、仅支持`color`和`background-color`两个属性且必须同时显式声明，否则将回退至浏览器默认的蓝底白字；兼容性上需按顺序叠加`::-moz-selection`、`::-webkit-selection`和标准`::selection`三重规则，深色模式下更需手动重写整套样式并确保文字与背景满足WCAG 4.5:1对比度要求；而对禁用输入框、Shadow DOM内容及iOS系统级文本选择等场景，则存在无法绕过的原生限制——掌握这些细节，才能真正掌控用户选中文本时的视觉体验。

直接写 ::selection 就能生效，但必须同时声明 color 和 background-color，否则浏览器会回退到系统默认高亮色（通常是蓝底白字），而不是继承父级颜色。

为什么写了 ::selection 却没变色？

最常见原因是只写了其中一个属性，比如只设了 color: #fff，但没写 background-color —— 这时文字可能变成白字，但背景仍是系统默认蓝色，导致对比度低、看不清；或者反过来，背景变了但文字还是黑的，直接“消失”在深色背景里。

• ::selection 完全不继承父元素的 color 或 background-color，哪怕父级是 body { color: #111; } 也没用
• 浏览器只认显式声明的 color 和 background-color，其他如 font-weight、border、text-shadow（Firefox 不支持）全被忽略
• 如果用了 CSS 变量但没在 :root 或 html 上定义，color: var(--text-selected) 会计算为 currentColor，最终可能 fallback 到黑色

如何兼容旧版 Firefox 和 Safari？

Firefox 61+ 支持标准 ::selection，但老版本只认 ::-moz-selection；Safari 15.4 之前需要 ::-webkit-selection。现代写法是双写，且顺序不能错：

::-moz-selection {
  color: #fff;
  background-color: #007acc;
}
::-webkit-selection {
  color: #fff;
  background-color: #007acc;
}
::selection {
  color: #fff;
  background-color: #007acc;
}

• 把 ::-moz-selection 放最前，避免被后续规则覆盖（它权重低，容易被压住）
• ::-webkit-selection 和 ::selection 规则内容必须完全一致，否则 Safari/Chrome 可能按不同值渲染
• 别单独写 ::-moz-selection 后不跟标准写法——新版 Firefox 会忽略它，而旧版又没兜底

深色模式下选中文本看不清怎么办？

@media (prefers-color-scheme: dark) 对 ::selection 无效，必须手动重写整套规则：

@media (prefers-color-scheme: dark) {
  ::-moz-selection {
    color: #e2e8f0;
    background-color: #4a5568;
  }
  ::-webkit-selection {
    color: #e2e8f0;
    background-color: #4a5568;
  }
  ::selection {
    color: #e2e8f0;
    background-color: #4a5568;
  }
}

• 别指望系统自动适配：深色主题下若仍用 background-color: #007acc，可能蓝底配灰字，对比度低于 2:1，肉眼难辨
• 推荐用 WCAG 最小对比度 4.5:1 验证，可用 color-contrast(#e2e8f0, #4a5568)（仅 Safari 支持）辅助测试
• 如果项目用 CSS 变量控制主题，记得在 :root[data-theme="dark"] 下也重置 --selection-bg 和 --selection-text

::selection 在哪些地方根本不起作用？

它对三类场景完全无效，不是写法问题，是浏览器限制：

• input[disabled] 和 textarea[readonly]（部分浏览器下）里的文本无法被 ::selection 控制
• Shadow DOM 内部内容：即使你在组件内部写了 host::selection，也不会穿透边界生效
• iOS 长按呼出系统选择菜单时，整个高亮区域由系统接管，::selection 被强制忽略——这是 WebKit 的硬性限制，JS 也无法绕过

这些限制没法 hack，只能提前设计降级方案，比如对禁用输入框用 JS 模拟选中态，或接受 iOS 下的原生表现。

本篇关于《CSS中如何设置选中文本颜色样式》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！