::selection 必须同时设置 color 和 background-color 才生效，仅设 background-color 会因文字颜色未定义而不可见；它仅支持少数文本属性，且需写三份兼容写法，移动端和部分浏览器存在限制。
直接写 ::selection 就能改，但只声明 background-color 常常没反应——必须同时显式设置 color 和 background-color，缺一不可。
为什么只写 background-color 没效果
浏览器对未声明的属性会回退到默认值，比如你只设了 background-color: #ff6b6b，但没设 color，文字可能变成黑色，和深色背景混在一起，看起来像“没生效”。这不是 bug，是渲染逻辑本身要求二者共存才可形成可读对比。
- 父容器若设置了
user-select: none，内容根本无法被选中，::selection完全不会触发 - 在 Vue 的
<style scoped>或 Shadow DOM 里写::selection，它不穿透作用域，会被忽略 - 页面某处写了更具体的选择器（如
p::selection），权重更高，会覆盖你全局写的::selection
::selection 支持哪些 CSS 属性
它只接受极少数文本相关属性，其他一律静默失效，不报错也不提示：
- ✅ 必须设置的两个：
color、background-color - ⚠️ 有条件支持：
text-shadow（Firefox 和 Chrome 支持；Safari 15.4+ 才开始认） - ❌ 完全无效：
font-size、border、padding、background-image、transform、opacity、calc()计算值、CSS 变量动态混合（如color-mix()） - 别用
rgba()半透明色——部分 Safari 版本会降级为纯色或发灰，优先用十六进制不透明值，比如#3b82f6
兼容写法与作用域陷阱
::selection 是全局伪元素，不能嵌套，也不能加 !important。要让它跨浏览器生效，得写三份：
立即学习“前端免费学习笔记（深入）”；
::-moz-selection { background-color: #ff6b6b; color: white; }
::-webkit-selection { background-color: #ff6b6b; color: white; }
::selection { background-color: #ff6b6b; color: white; }
-
::-moz-selection必须放在最前，否则会被后面规则覆盖 -
input和textarea中的选中色无法用::selection控制，它们走操作系统主题 - 不要写
.code-block::selection——这是无效语法，浏览器不识别；想“局部化”，只能靠父容器的color和background-color继承来间接影响视觉表现
移动端和特殊场景的硬限制
iOS Safari 在长按唤起系统级选择菜单时，会强制使用浅灰背景，此时 ::selection 完全不生效——这是系统行为，CSS 无权干预。微信 X5 内核对 ::selection 支持极差，旧版 Android WebView 也可能只响应 background-color。
真正容易被忽略的是：不是所有颜色值在所有浏览器里都可靠。hsl()、渐变、transparent 都可能退回到默认蓝底白字，上线前务必在真机上验证深色/浅色背景下的实际表现。
