::selection 必须写在全局顶层且同时声明 color 和 background-color 才生效；嵌套在媒体查询、类选择器或 css-in-js 局部作用域中会被静默忽略，需用 injectglobal 或手动注入 style 标签。

::selection 必须写在全局顶层，且至少声明 color 和 background-color 才能生效。只设 text-shadow 或只写 color: inherit 会完全没反应——浏览器不是“不支持”，而是直接跳过整条规则。

为什么写了 ::selection 却像没写一样？

最常踩的坑不是颜色选错，而是规则根本没被解析：

• ::selection 不能嵌套在 @media、.theme-dark 或任何类选择器内部，比如 .article p::selection 在 Safari 和旧版 Chrome 中会被静默忽略
• 父容器若设了 user-select: none，子元素连选中行为都没有，::selection 自然不会触发
• CSS-in-JS（如 Emotion、Styled Components）默认注入局部样式，必须用 injectGlobal 或手动插入 <style></style> 到
• 某些 UI 框架（如 Ant Design）重置了全局 ::selection，背景色设为 transparent，得用更高优先级显式覆盖

::-webkit-selection 和 ::selection 的顺序与必要性

iOS Safari 15.4 之前、Android WebView 等环境只认带前缀的写法，且顺序错会导致失效：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• 必须先写 ::-webkit-selection，再写标准 ::selection；反过来 Safari 可能忽略后者
• ::-moz-selection 已废弃，Firefox 91+ 只认 ::selection，加了反而冗余
• 移动端 Safari 对 text-shadow 和 color 支持极弱，background-color 是唯一稳定可控的属性

品牌色适配深色模式与对比度陷阱

直接把品牌主色搬进 ::selection 很危险：

• 深色背景区域（如暗色模式下的 <pre class="brush:php;toolbar:false;"></pre>）用浅色文字 + 浅色背景，可能对比度不足甚至文字消失
• iOS Safari 长按呼出系统菜单时，::selection 样式大概率被系统高亮覆盖，JS 无法干预
• 别依赖 color: currentcolor 或 CSS 变量计算（如 calc(--brand * 0.8)），::selection 不继承、不计算，必须写死具体值
• 建议为关键区块单独定义，例如 pre::selection 用深灰底+亮黄字，.quote::selection 用品牌红底+白字，避免全局一刀切

真正难的不是写出那两行 CSS，而是让同一套品牌色在白底、黑底、iOS 长按、代码块内、引用段落里都可读且一致——这需要实测，而不是靠理论推演。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！