Chrome 中：:selection 背景色不生效是因为需同时设置 color 和 background-color，禁用带 opacity 的半透色；Safari 仅支持纯色，不支持渐变或 filter；该伪元素不作用于 input/textarea 及 Shadow DOM 内容，移动端存在延迟或闪烁问题。
Chrome 里：:selection 背景色不生效？检查是否漏了 color 或 opacity
Chrome（含 Edge）对 ::selection 的渲染有隐式限制：如果只设 background-color 但没配 color，或者用了带 opacity 的半透色，高亮可能完全不可见或颜色异常。这不是 bug，是渲染引擎对文本可读性的强制干预。
- 必须同时设置
color和background-color，哪怕只是继承默认值（如color: inherit） - 避免用
rgba(0,0,0,0.5)这类带透明度的背景色——Chrome 会直接忽略它 - 若想实现“淡入”效果，改用
background-color: #ff6b6b+transition配合 JS 触发状态切换，而不是靠 opacity
Safari 不支持：:selection 里的渐变或 filter
Safari（包括 iOS WebKit）只接受纯色 background-color 和 color，任何 linear-gradient、radial-gradient 或 filter: blur() 都会被静默丢弃，且不报错。
- 写法上别浪费时间试
background: linear-gradient(……)—— 它在 Safari 里等同于没写 - 如果设计稿要求高亮区有微妙阴影，只能退回到深浅两档纯色方案，比如浅灰背景配深灰文字，深色模式下反过来
- 可用
@supports (selector(::selection))做基础检测，但无法细分到“是否支持渐变”，所以得靠 UA 判断或降级处理
::selection 作用域有限：不能跨元素继承，也不影响 input/textarea
::selection 只作用于普通文本流中的选中内容，对表单控件、SVG 文本、Shadow DOM 内容完全无效。尤其容易误以为能改 <input> 里的高亮色，其实不行。
-
<input type="text">和<textarea>的选中样式由系统或浏览器内置控制，CSS 无法覆盖 - 若需统一视觉，只能用 JS 拦截
selectstart事件 + 自定义浮动层模拟，但体验和语义都打折扣 - 在 Shadow DOM 中使用
::selection，必须在 shadow root 内部单独声明，不能从外部样式表穿透进去
移动端双击文字触发高亮时，::selection 可能延迟或闪烁
iOS Safari 和部分安卓 WebView 在双击选中单词后，::selection 样式有时会延迟 100–300ms 才应用，甚至出现先闪默认蓝、再切为你定义的颜色的现象。
立即学习 “ 前端免费学习笔记（深入）”；
- 这不是 CSS 加载慢，而是 WebKit 对“快速双击”的临时高亮策略优先级更高
- 缓解方式：给
::selection加transition: background-color 0.1s，让切换更顺滑（注意 Safari 不支持 transition on ::selection，所以实际要靠 JS 监听selectionchange+ 动态 class 控制） - 真正稳定的方案是放弃依赖
::selection做核心交互反馈，把它当作视觉增强项，而非功能必需项
实际项目里最常被卡住的，是以为改了 ::selection 就万事大吉，结果在 Safari 里空白、在 Chrome 里看不见、在 iOS 上闪一下就回蓝——这些都不是代码写错了，而是规则本身就有边界。
