::selection 必须同时写 ::-webkit-selection 和 ::selection 才能在 safari 和旧版 chrome 生效；常见失效原因包括嵌套在类或 id 中、父元素设 user-select: none、优先级被覆盖，且仅支持 color、background-color 等有限属性。
::selection 能生效，但必须同时写 ::-webkit-selection 和 ::selection，否则 Safari 和旧版 Chrome 会直接跳过规则；Firefox 新版已支持标准写法，但加 ::-moz-selection 仍可兜底老版本。
为什么写了 ::selection 却没效果
最常见原因是浏览器压根没解析到这条规则——它被当作非法语法忽略。根本原因有三个：
-
::selection必须声明在全局作用域，不能嵌套在.class或#id里，比如article.content ::selection在 Safari 中完全无效 - 父容器设置了
user-select: none，子元素根本无法触发选中行为，伪元素自然不激活 - CSS 优先级冲突：页面某处写了更具体的选择器（如
p::selection），而你只写了全局::selection，结果被覆盖
::selection 支持哪些 CSS 属性
它只接受极少数样式声明，其余全部被忽略。可用的有：
-
color（文字前景色） -
background-color（背景色，支持rgba()，但transparent会退回到浏览器默认色） -
text-shadow（部分浏览器支持，深色背景上慎用）
明确不支持：font-size、padding、border、transform、opacity、CSS 变量计算（如 calc(--accent * 0.8)）。
移动端和暗色模式下的实际限制
iOS Safari 对 ::selection 的控制力很弱：
- 长按呼出菜单时，样式可能完全不触发，这是系统级限制，JS 也绕不过
- 即使生效，
color常被强制覆盖为白色，background-color是唯一较可靠可控的属性 - 暗色模式下固定色值容易对比度不足，建议用
@media (prefers-color-scheme: dark)单独覆盖，例如：
@media (prefers-color-scheme: dark) {
::-webkit-selection { background-color: #4a5568; color: #e2e8f0; }
::selection { background-color: #4a5568; color: #e2e8f0; }
}
input 和 textarea 完全不响应 ::selection，它们走系统级文本选择逻辑，只能通过 caret-color 控制光标。
