CSS设置选中文本背景色技巧

本文详解CSS中通过`::selection`伪元素自定义文本选中背景色的核心要点与实战陷阱：它仅支持有限样式（如`background-color`、`color`等），而`font-size`、`padding`等常用属性完全无效；为确保跨浏览器兼容，必须同时声明`::selection`、`::-moz-selection`和`::-webkit-selection`三套前缀写法；需特别警惕iOS Safari的硬性限制——其对`background-color`几乎完全不支持，仅识别`color`，且该问题无法通过前缀修复，真机测试才能暴露；此外还剖析了全局与局部`::selection`的优先级逻辑、Shadow DOM及富文本编辑器中的失效场景，帮你避开调试半天却不见效果的典型坑。

selection伪元素能改哪些样式

只支持有限的几个CSS属性：color、background-color、cursor、outline、text-shadow。其他像font-size、padding、border全无效，写了也白写。

常见错误是以为能像普通元素一样自由设置——结果调半天发现背景色没变，其实是误加了background（它不生效）而不是background-color。

::selection在不同浏览器里的写法差异

Chrome/Edge/新版Firefox用::selection；老版Safari（≤15.4）和旧Firefox（≤67）必须加::-webkit-selection和::-moz-selection前缀才能生效。

实际写法得这样兜底：

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

漏掉任一前缀，对应浏览器里选中文本就还是系统默认蓝底白字。

全局设置 vs 局部覆盖的优先级问题

::selection本身没有继承性，但它的样式会受选择范围内的元素影响。比如给

单独设了::selection，那这段文字被选中时就走这个规则；没设的话，才回落到全局规则。

容易踩的坑：

• 在body上设了全局::selection，但某个
  里想用深色背景配浅色字，却忘了给.code-block::selection单独定义
• 用了CSS-in-JS或Shadow DOM，::selection可能被作用域隔离，根本不起作用
• 某些富文本编辑器（如Draft.js、Slate）自己接管了选中逻辑，原生::selection会被绕过

移动端iOS Safari的特殊限制

iOS Safari（至少到16.x）对::selection支持极弱：只认color，background-color基本无效，哪怕加了-webkit-前缀也没用。

这不是你代码写错了，是它就是不支持。如果项目强依赖选中高亮，得考虑用JS模拟（比如监听selectionchange，动态插入包裹选中内容），但代价是破坏原生体验和可访问性。

真正麻烦的是：这个限制不会报错，也不会警告，你只能在真机上试，模拟器都测不出来。

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~