HTML中CSS的::selection伪元素自定义文字选中高亮样式-html教程-PHP中文网

::selection伪元素必须全局独立声明且双写前缀，仅支持color、background-color等有限属性；嵌套写法、user-select:none、css-in-js局部注入或框架重置均会导致其完全失效。

html中css的::selection伪元素自定义文字选中高亮样式

::selection 伪元素必须写在全局作用域，且需同时声明 color 和 background-color，否则多数浏览器不生效。

最常见原因不是语法错，而是规则根本没被浏览器解析到：

::selection 不能嵌套在任何类、ID 或媒体查询内部——比如 .article p::selection 或 @media (min-width: 768px) { ::selection { ... } } 在 Safari 和旧版 Chrome 中会被直接跳过
父容器设了 user-select: none，子元素无法触发选中行为，::selection 自然不会激活
CSS-in-JS 库（如 Emotion）默认把样式注入局部作用域，::selection 规则得用 injectGlobal 或手动插入 <style></style> 标签到
某些 UI 框架（如 Ant Design）重置了全局 ::selection，颜色设为 transparent 或继承，需显式覆盖

仅写 ::selection 在 iOS Safari 15.4 之前、Android WebView 等环境会失效。正确顺序是先 ::-webkit-selection，再 ::selection：

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

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

它不是普通选择器，浏览器只接受特定视觉属性，其余一律静默忽略：

✅ 安全可用：color、background-color（支持 rgba()，但 transparent 会退回到系统默认色）、text-shadow（仅部分浏览器，深色背景慎用）
❌ 明确不支持：font-size、padding、border、opacity、transform、CSS 变量计算（如 calc(--accent * 0.8)）
cursor 基本无效，outline 和 text-decoration 兼容性差，别依赖
不能写成 color: inherit 或 color: currentcolor——::selection 不继承父级颜色，必须写具体值

固定色值在深色背景或暗色模式下极易对比度不足，甚至文字消失：

iOS Safari 长按呼出菜单时，::selection 样式可能完全不触发，这是系统级限制，JS 无法绕过
纯 CSS 方案可用 @media (prefers-color-scheme: dark) 手动覆盖，但 Firefox 对该媒体查询内 ::selection 的支持不稳定
更稳妥的做法是用 JS 动态设置 document.documentElement.style，绑定 CSS 自定义属性，例如：--selection-bg: #4a5568，再在全局 ::selection 中引用（注意：变量本身不能直接用于 ::selection，需 JS 替换为具体值）
表单控件（<input>、<textarea></textarea>）在 Firefox 中至今不支持 ::selection，Chrome/Edge 99+ 支持，但行为仍受限