怎样通过CSS伪元素::selection自定义文本高亮颜色-css教程-PHP中文网

::selection 必须与::-webkit-selection成对且完全一致才生效，仅支持color、background-color等少数属性，需顶层声明、避免父级user-select:none，并注意移动端兼容性。

怎样通过css伪元素::selection自定义文本高亮颜色

直接写 ::selection 基本没用，必须搭配 ::-webkit-selection 且规则完全一致，否则 Safari 和 Chrome 里根本看不到效果。

不是语法错，而是浏览器压根没执行这条规则：

user-select: none 写在父容器（比如 body 或某个 wrapper）上 → 文本不可选，伪元素无从触发
写在 @media、.class 或 #id 选择器内部 → Safari 和旧版 Chrome 直接忽略，必须是顶层独立声明
用了 CSS-in-JS（如 styled-components、Emotion）→ 样式注入局部作用域，::selection 不穿透；得用 injectGlobal 或手动插入
UI 框架（如 Ant Design）全局重置了 ::selection，设为 transparent 或继承值 → 需显式覆盖，且选择器权重得够高

只写 ::selection 在 Chromium/Safari 下大概率失效。WebKit/Blink 内核强制要求显式声明 ::-webkit-selection，且两个规则的属性名、值写法（比如都用 #3b82f6，别一个用 rgb() 一个用 hex）必须完全一致：

正确写法示例：

CSS

CSS 官方网站入口。访问 W3C 的 CSS 页面，查看 CSS 标准、学习资料与工作组动态；CSS 是 Web 标准，无需下载安装。

下载

::-webkit-selection {
  color: white;
  background-color: #3b82f6;
}
::selection {
  color: white;
  background-color: #3b82f6;
}

::selection 不是普通选择器，浏览器只接受极少数视觉属性，其余一律静默忽略、不报错也不提示：

✅ 安全可用：color、background-color（推荐用十六进制，避免 rgba() 或 hsl() 在 Safari 渲染异常）、text-shadow（Chrome/Firefox 支持好，Safari 15.4+ 才支持）
❌ 明确无效：font-size、padding、border、opacity、transform、background（注意：必须写 background-color，写 background 可能失效）
⚠️ 特别注意：color 和 background-color 建议成对设置，只设一个容易导致文字“消失”（比如深色背景上只设 background-color，文字继承黑色就看不清）

::selection 不继承、不跨元素混合，它始终作用于被选中文本所在的具体宿主元素：

全局统一：::selection { background: #ff6b6b; color: white; }
只对段落生效：p::selection { background: #ffcc00; color: #333; }
代码块特殊处理：pre::selection, code::selection { background: #2d2d2d; color: #f8f8f2; }
引用区块单独配色：.quote blockquote::selection, .quote cite::selection { color: #666; }
跨区块选中时，颜色由起点所在元素的最近有效规则决定，不是按区域拼接

最容易被忽略的一点：移动端（尤其是 iOS Safari）对 ::selection 的支持仍不稳定，长按选词常被系统级高亮覆盖；别把它当关键交互依赖，必要时配合 document.getSelection() 做 JS 层兜底。