::selection 必须同时设置 color 和 background-color 才生效，仅设背景色会导致文字与背景混叠；它仅支持 color、background-color 和有限 text-shadow，不支持 font-size、border 等属性，且需按顺序书写三份兼容写法。
只写 ::selection { background-color: #ff6b6b } 大概率没反应——必须同时设置 color 和 background-color，否则文字可能和背景混成一片，看起来像“失效”。
为什么 ::selection 只设背景色常常不生效
浏览器不会自动为你推导文字颜色。如果你只声明 background-color，color 会沿用父级或默认值（比如黑色），在深色背景上直接“消失”。这不是 bug，是渲染逻辑要求二者显式共存才能形成可读对比。
- 检查 DevTools 的 Styles 面板：选中一段文本后，看右侧是否真有
::selection规则被应用；没有，说明被覆盖或未触发 - 确认祖先元素没加
user-select: none—— 它会让子内容彻底无法选中，::selection根本不会激活 - 避免用
rgba()半透明色：Firefox 会忽略 alpha 通道，Safari 某些版本会降级发灰；优先用十六进制不透明值，如#3b82f6
::selection 支持哪些 CSS 属性
它只接受极少数文本相关属性，其余一律静默失效，不报错也不提示：
- ✅ 必须设置的两个：
color、background-color - ⚠️ 有条件支持：
text-shadow（Chrome/Firefox 支持；Safari 15.4+ 才开始认） - ❌ 完全无效：
font-size、border、padding、background-image、transform、opacity、calc()、CSS 变量混合（如color-mix()）
兼容写法与作用域陷阱
::selection 是全局伪元素，不能嵌套，也不能加 !important。要跨浏览器稳定生效，得写三份，且顺序不能错：
立即学习“前端免费学习笔记（深入）”；
::-moz-selection {
background-color: #ff6b6b;
color: white;
}
::-webkit-selection {
background-color: #ff6b6b;
color: white;
}
::selection {
background-color: #ff6b6b;
color: white;
}
-
::-moz-selection必须放在最前，否则会被后续规则覆盖（尤其在旧版 Firefox 中） - 不要写
.content::selection—— 这是无效语法；想局部控制，只能靠父容器的color和background-color继承来间接影响视觉 -
<input>和<textarea>中的选中色无法用::selection控制，它们走操作系统主题
移动端与暗色模式下的硬限制
iOS Safari 对 ::selection 支持不稳定，尤其在 viewport 缩放、字体放大或配合 transform 使用时，可能出现只高亮部分文字；微信 WebView 等内嵌环境可能完全忽略该伪元素。
- 深色模式下别依赖系统自动适配：必须手动加媒体查询，例如：
@media (prefers-color-scheme: dark) { ::selection { background-color: #4a4a4a; color: #fff; } } -
::selection不支持动画或transition—— 它不是真实 DOM 节点，浏览器只在选中瞬间“快照式”应用样式，没有中间状态可插值 - 在
<div contenteditable="true">里行为可能异常，需单独测试
真正容易被忽略的是：它对 overflow: hidden 或 transform（哪怕只是 scale(0.99)）敏感，某些浏览器会切断继承链，导致伪元素样式丢失。这种问题在调试时很难一眼定位，得逐层检查祖先的渲染上下文。
