必须同时声明color和background-color才能生效，因为::selection不继承父级颜色且仅支持这两个属性，缺一不可，否则回退到浏览器默认蓝底白字。
直接写 ::selection 就能生效，但必须同时声明 color 和 background-color，否则浏览器会回退到系统默认高亮色（通常是蓝底白字），而不是继承父级颜色。
为什么写了 ::selection 却没变色？
最常见原因是只写了其中一个属性，比如只设了 color: #fff，但没写 background-color —— 这时文字可能变成白字，但背景仍是系统默认蓝色，导致对比度低、看不清；或者反过来，背景变了但文字还是黑的，直接“消失”在深色背景里。
-
::selection完全不继承父元素的color或background-color，哪怕父级是body { color: #111; }也没用 - 浏览器只认显式声明的
color和background-color，其他如font-weight、border、text-shadow（Firefox 不支持）全被忽略 - 如果用了 CSS 变量但没在 :root 或 html 上定义，
color: var(--text-selected)会计算为currentColor，最终可能 fallback 到黑色
如何兼容旧版 Firefox 和 Safari？
Firefox 61+ 支持标准 ::selection，但老版本只认 ::-moz-selection；Safari 15.4 之前需要 ::-webkit-selection。现代写法是双写，且顺序不能错：
::-moz-selection {
color: #fff;
background-color: #007acc;
}
::-webkit-selection {
color: #fff;
background-color: #007acc;
}
::selection {
color: #fff;
background-color: #007acc;
}
- 把
::-moz-selection放最前，避免被后续规则覆盖（它权重低，容易被压住） -
::-webkit-selection和::selection规则内容必须完全一致，否则 Safari/Chrome 可能按不同值渲染 - 别单独写
::-moz-selection后不跟标准写法——新版 Firefox 会忽略它，而旧版又没兜底
深色模式下选中文本看不清怎么办？
@media (prefers-color-scheme: dark) 对 ::selection 无效，必须手动重写整套规则：
立即学习“前端免费学习笔记（深入）”；
@media (prefers-color-scheme: dark) {
::-moz-selection {
color: #e2e8f0;
background-color: #4a5568;
}
::-webkit-selection {
color: #e2e8f0;
background-color: #4a5568;
}
::selection {
color: #e2e8f0;
background-color: #4a5568;
}
}
- 别指望系统自动适配：深色主题下若仍用
background-color: #007acc，可能蓝底配灰字，对比度低于 2:1，肉眼难辨 - 推荐用 WCAG 最小对比度 4.5:1 验证，可用
color-contrast(#e2e8f0, #4a5568)（仅 Safari 支持）辅助测试 - 如果项目用 CSS 变量控制主题，记得在
:root[data-theme="dark"]下也重置--selection-bg和--selection-text
::selection 在哪些地方根本不起作用？
它对三类场景完全无效，不是写法问题，是浏览器限制：
-
input[disabled]和textarea[readonly]（部分浏览器下）里的文本无法被::selection控制 - Shadow DOM 内部内容：即使你在组件内部写了
host::selection，也不会穿透边界生效 - iOS 长按呼出系统选择菜单时，整个高亮区域由系统接管，
::selection被强制忽略——这是 WebKit 的硬性限制，JS 也无法绕过
这些限制没法 hack，只能提前设计降级方案，比如对禁用输入框用 JS 模拟选中态，或接受 iOS 下的原生表现。
