CSS文本高亮技巧：选中文字颜色设置

CSS的`::selection`伪元素虽能轻松定制网页文本选中时的颜色与背景，但其实际应用远比表面复杂：它仅支持有限属性、需全局声明、在input/textarea等表单元素和部分替换元素中完全失效，且易受`user-select: none`、CSS作用域隔离、框架重置样式及浏览器兼容性（尤其是旧版Firefox和iOS Safari）影响；掌握优先级规则、针对性覆盖策略及暗色模式/移动端的降级处理，才是让高亮效果稳定生效的关键。

如何用 ::selection 改变选中文本颜色

直接生效，但只支持有限的 CSS 属性：color、background-color、text-shadow（部分浏览器）、cursor。其他如 font-size、border 会被忽略。

写法很简单：

::selection {
  color: white;
  background-color: #007acc;
}

• 必须写在全局样式中（不能嵌套在类或 ID 选择器里），否则无效
• Chrome / Edge / Safari 都支持，Firefox 需要加 ::-moz-selection 前缀才能兼容旧版本（新版已支持标准写法）
• 如果页面有深色背景，记得同步检查选中时的可读性——比如黑底白字被选中后变成黑底黑字，就看不见了

::selection 在不同元素里表现不一致？

是的。默认情况下，::selection 是全局生效的，但你可以给特定元素单独定义：

p::selection {
  color: #222;
  background-color: #ffeb3b;
}
code::selection {
  color: #fff;
  background-color: #333;
}

• 优先级遵循 CSS 一般规则：更具体的选择器胜出（比如 .article p::selection > p::selection）
• 注意 input 和 textarea 不响应 ::selection —— 它们用的是系统级文本选择样式，只能通过 caret-color 控制光标，无法改选中背景
• 表格单元格（td）、按钮（button）等替换元素，部分浏览器会降级使用系统样式，导致自定义失效

为什么有时候 ::selection 完全不生效？

常见原因不是语法错，而是被覆盖或限制：

• 父元素设置了 user-select: none —— 这会让文本根本无法被选中，自然触发不了 ::selection
• CSS 里用了 !important 强制覆盖了 color 或 background-color，而 ::selection 的声明没加 !important，就会被压住
• 用了 CSS-in-JS 库（如 Emotion、styled-components），动态生成的类名可能作用域隔离，导致 ::selection 规则没挂到 document 根层，需要显式用 injectGlobal 或全局 style 标签处理
• 某些 UI 框架（如 Ant Design）自带重置样式，会把 ::selection 设为透明或继承，得手动再覆盖一遍

移动端和暗色模式下的兼容细节

iOS Safari 对 ::selection 支持较弱：仅支持 color 和 background-color，且不支持伪元素嵌套（比如 div::selection span 无效）。暗色模式下没有自动适配机制，得靠媒体查询手动切：

@media (prefers-color-scheme: dark) {
  ::selection {
    color: #111;
    background-color: #e0e0e0;
  }
}

• iOS 上长按唤出菜单后，选中高亮可能延迟半秒才应用新样式，属于渲染机制限制，没法绕过
• Android Chrome 一般没问题，但 WebView（尤其老版本）可能完全忽略 ::selection，建议做降级提示或避免依赖它传达关键信息
• 不要指望用 ::selection 实现“选中即复制”之类交互——它只是视觉层，和 Selection API 无关

真正麻烦的是跨浏览器一致性，尤其是 input 类表单控件和移动端 WebView；一旦发现某处不生效，先查 user-select 和作用域，再看是不是框架/构建工具把样式隔离了。

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