Chrome中::selection不生效必须同时声明且分开书写::selection和::-webkit-selection两条独立规则，因Chrome/Edge只认后者，而合并声明会导致整条规则被忽略。
::selection在Chrome里完全不生效？必须双写且分开声明
只写::selection，Chrome 和 Edge 就会当它不存在——它们只认::-webkit-selection。但如果你把两个写进同一个规则里，比如::selection, ::-webkit-selection { ... }，现代浏览器反而会整条规则忽略：只要其中任一选择器不支持，整个声明块就作废。
正确做法是拆成两条独立规则，顺序无关，但必须都存在：
::selection {
color: #fff;
background-color: #007acc;
}
::-webkit-selection {
color: #fff;
background-color: #007acc;
}
- Firefox 只读
::selection，无视::-moz-selection（61+ 版本已弃用） - 别再写
::-moz-selection或::-ms-selection，实测不仅无效，还可能干扰解析 - 不要加
!important——所有浏览器都会忽略它在::selection里的作用
Safari选中背景色忽明忽暗？检查父级user-select和渲染层干扰
iOS/iPadOS Safari 对::selection最敏感，稍有干扰就回退系统默认蓝底。常见触发点不是代码写错，而是布局或交互配置动了底层渲染路径。
- 父容器写了
user-select: none或-webkit-user-select: none→::selection直接失效，连样式计算都不走 - 父元素用了
transform、isolation: isolate、未加前缀的backdrop-filter→ 触发图层分离，选中样式丢失 -
<input>和<textarea>内部几乎无法控制选中色，Safari 尤其严格；只能靠::-webkit-input-placeholder之类间接方案
验证方式：DevTools 里选中文本，看 Styles 面板中::selection是否被标灰或划掉。临时删掉疑似干扰规则，就能快速定位。
立即学习“前端免费学习笔记（深入）”；
深色模式下选中文字看不清？不能依赖自动适配
很多网站切深色模式后，::selection还是浅色背景配浅灰字，对比度低于 2:1，根本没法读。这不是浏览器 bug，是你没手动覆盖。
-
::selection不继承父级颜色，也不响应prefers-color-scheme自动切换 - 必须显式用
@media (prefers-color-scheme: dark)重写整套规则 - 推荐用
color-contrast()实验性函数校验最小对比度（如color-contrast(white vs #2d2d2d) >= 4.5），但需 fallback 值
示例：
@media (prefers-color-scheme: dark) {
::selection {
background-color: #2d2d2d;
color: #f8f8f2;
}
::-webkit-selection {
background-color: #2d2d2d;
color: #f8f8f2;
}
}
移动端文本高亮总被系统覆盖？优先排查可选状态
iOS Safari 在某些场景下会强制接管文本高亮逻辑，尤其静态<div>里——哪怕 CSS 写对了，也可能只闪一下就变回蓝底。
- 确保元素本身允许选择：
user-select: text（或至少没被父级禁用） - 避免
touch-action: manipulation或全局禁用长按菜单的 JS 脚本（常见于 H5 框架） - 若内容来自 React/Vue 动态渲染，需确认节点已挂载完成再应用样式；
::selection对 DOM 结构无延迟要求 - 实在不可控时，用
selectionchange事件 +document.getSelection()包裹文本并加 class，比 CSS 更可靠
真正难的不是写样式，是让浏览器“愿意执行”它——大部分失效问题，根子不在选择器，而在上下文约束。
