最常见原因是 Safari 兼容性不足和父元素 user-select: none 干扰；需同时声明 ::-webkit-selection 和 ::selection，且确保文本可被选中。
为什么 ::selection 样式不生效
最常见原因是浏览器兼容性或选择器优先级不足。Chrome/Edge 119+、Firefox 120+ 支持标准语法，但 Safari 仍要求带前缀 ::-webkit-selection；另外，::selection 只能设置有限的属性（color、background-color、text-shadow、cursor），其他如 font-weight 或 border 会被忽略。
::selection 必须搭配 ::-webkit-selection 才能全平台生效
Safari 和旧版 Chrome 仅识别 WebKit 前缀版本，且两者需**同时声明**——不能只写一个。现代浏览器会忽略带前缀的规则，但 Safari 完全不认无前缀版本。
正确写法：
::-webkit-selection {
color: #fff;
background-color: #007acc;
}
::selection {
color: #fff;
background-color: #007acc;
}
- 顺序无关紧要，但建议先写
::-webkit-selection再写标准版 - 两组规则的样式必须完全一致，否则 Safari 和 Chrome 表现不统一
- 不要用
!important——它在::selection中多数浏览器不支持
父元素设置了 user-select: none 会导致 ::selection 失效
如果文本容器或其任意祖先有 user-select: none（比如按钮、禁用区域），用户根本无法选中文本，自然不会触发 ::selection 样式。
立即学习“前端免费学习笔记（深入）”；
- 检查 DOM 结构中是否有
user-select: none向上透传 - 临时加一句
user-select: text到目标文本元素可快速验证 - 注意：
user-select: all或contain也会影响选中行为，不一定触发高亮
伪元素继承与颜色对比度问题
如果父元素文字颜色是浅色（如 color: #eee），而你设的 ::selection color 也是浅色，视觉上可能“看不见”变化；更隐蔽的是，某些字体渲染下 text-shadow 会干扰颜色显示。
- 调试时优先用高对比组合，例如
color: red; background-color: yellow -
::selection不继承父级color，但会受系统深色模式影响（部分浏览器会强制调整背景色） - 移动端 iOS Safari 对
background-color的 alpha 通道支持不稳定，避免用rgba(0,0,0,0.5)
user-select 干扰这两处，其他浏览器表现一致后，这两个点没排查完就别急着改颜色值。 
