如何在CSS中利用::selection伪元素定制文本选中颜色？

::selection真正可用的样式属性仅有color、background-color，部分浏览器支持text-shadow和cursor；font-size、border、padding等一律无效，且不响应!important。

::selection 能生效，但限制极多——它只作用于用户手动选中的文本，且仅支持有限的 CSS 属性，跨浏览器行为也不一致。

哪些样式属性在 ::selection 中真正可用？

只有 color、background-color、text-shadow（部分浏览器）、cursor（极少数）被广泛支持。其他如 font-size、border、padding 一律忽略。

• color 和 background-color 是最稳定、必用的两个属性
• text-shadow 在 Chrome/Firefox 中有效，但在 Safari 16.4+ 才开始支持，旧版 Safari 会直接丢弃整条规则
• 不要写 opacity 或 transform——它们不会报错，但完全无效

为什么有时候 ::selection 完全不生效？

常见原因不是语法错，而是层级或继承干扰：

• 父元素设置了 user-select: none，子元素哪怕写了 ::selection 也选不了，自然不触发
• 选中区域包含 <input> 或 <textarea></textarea> —— 这些表单控件有自己的原生选中样式，::selection 对它们无效（需用 ::-webkit-input-placeholder::selection 等专有伪元素，且兼容性差）
• CSS 优先级被更高权重的选择器覆盖，比如 div p::selection 被 p::selection 后声明的规则压过
• 用了 !important？别加——它在 ::selection 中多数浏览器直接无视

如何让深色模式下选中文本依然可读？

不能只靠 @media (prefers-color-scheme: dark) 套一层，因为 ::selection 的颜色必须与当前背景形成足够对比度，否则文字会“消失”。

立即学习“前端免费学习笔记（深入）”；

• 深色背景配浅色文字时，选中背景建议用 #4a5568 类似灰蓝，避免纯黑或纯白
• 浅色背景配深色文字时，选中背景用 #90cdf4 这类柔和蓝，比 #007bff 更不易刺眼
• 如果页面动态切换主题（JS 控制 class），记得同步更新 ::selection 规则，例如：.dark-theme p::selection { background-color: #2d3748; color: #e2e8f0; }

真正麻烦的是：Safari 对 ::selection 的继承逻辑和 Chrome 不同，同一段 CSS 在 Safari 可能只对 <p></p> 生效，对 <span></span> 内嵌文本却失效——这时候得显式给内联元素单独写规则，而不是依赖父级继承。