::selection 中 RGB 颜色未生效是因为多数浏览器仅支持不带透明度的纯色（如 #2a5c82），禁用 rgba()、hsla() 等含 alpha 的写法；需用十六进制转换并加浏览器前缀，且 iOS Safari 完全不支持该伪元素。
为什么 ::selection 设置 RGB 颜色后没生效？
直接写 color: rgb(255, 100, 50); 或 background: rgb(30, 30, 30); 在 ::selection 里，大概率无效——因为多数浏览器（Chrome、Edge、Safari）只支持 ::selection 的 color 和 background，且要求颜色值必须是 **不带透明度的纯色**；一旦用了 rgba()、hsla() 或带 alpha 的十六进制（如 #ff643280），整条规则会被忽略。
::selection 兼容性与写法限制
不同浏览器对伪元素的支持粒度不同，尤其旧版 Safari 和 Firefox 对属性支持更保守：
- Chrome/Edge：支持
color、background、text-shadow（但不支持渐变或border） - Safari（≤15.6）：仅支持
color和background，且background不能是transparent或含 alpha 值 - Firefox：支持最宽松，允许
background使用rgba()，但其他浏览器不买账，所以别依赖 - 必须加浏览器前缀才能覆盖旧版本：
::-webkit-selection、::-moz-selection
正确写法示例：
::-webkit-selection,
::-moz-selection,
::selection {
color: #fff;
background: #2a5c82;
}
RGB 值怎么安全转成兼容写法？
如果你手头只有 RGB 数值（比如 rgb(42, 92, 130)），不要直接复制粘贴进 CSS——得转成十六进制再验证是否可读：
立即学习“前端免费学习笔记（深入）”；
- 用在线工具或编辑器快速转换：
rgb(42, 92, 130)→#2a5c82 - 检查对比度：选中文字颜色和背景色之间至少要满足 WCAG AA 级对比度（4.5:1），否则用户看不清。可用浏览器 DevTools 的“无障碍”面板实时测
- 避免过深的蓝灰背景配黑字——看似高级，实则选中后文字完全消失，因为
color被默认继承为黑色，而背景太暗 - 别在
::selection里用变量（var(--primary)），CSS 自定义属性在伪元素中不生效
移动端和深色模式下容易被忽略的问题
桌面端调好的 ::selection 到手机上可能失效，原因很实际：
- iOS Safari 完全忽略
::selection样式（包括所有前缀），只用系统默认蓝底白字——你写的任何样式都不会出现 - Android Chrome 支持，但若页面启用了深色模式（
@media (prefers-color-scheme: dark)），而你没重写::selection，就会沿用亮色模式下的配置，导致文字在深背景上不可读 - 解决办法：在媒体查询里单独覆盖，例如：
@media (prefers-color-scheme: dark) {
::-webkit-selection,
::-moz-selection,
::selection {
color: #e2e8f0;
background: #4a5568;
}
}
iOS 的限制目前无绕过方案，只能接受它不支持——这不是你代码的问题，是平台本身没开放这个接口。
