暗黑模式下::selection文字不可见是因为其不继承父级颜色，需显式声明color和background-color；必须同时定义::selection和::-moz-selection，避免浏览器兼容问题。
为什么暗黑模式下::selection文字经常看不见
深色背景配默认选中样式（蓝底白字）时，::selection 的 color 和 background-color 没显式重写，就会沿用浏览器默认值——而 Safari/Chrome 在暗背景下仍倾向用浅色文字+深蓝背景，结果常是黑底黑字或灰底灰字。这不是 bug，是 ::selection 不继承父级文本色的必然表现。
- 父元素设了
color: #e2e8f0，但::selection里没写color→ 文字颜色 fallback 到浏览器默认（通常是黑色） -
background-color用了带 alpha 的值（如#3b82f680），Safari 渲染异常，导致背景“变透明”，文字直接叠在深色容器上 - 只写了
@media (prefers-color-scheme: dark) { ::selection { ... } }，但忘了加::-moz-selection→ Firefox 下完全不生效
怎么写才真正生效：必须显式声明 color + background-color
::selection 只认这两个属性，其他像 text-shadow、font-weight 全部忽略。别浪费时间调试它们。
- 全局兜底规则优先写：
::selection和::-moz-selection并列，避免遗漏 -
color推荐用明确亮度值：暗黑模式下至少#e2e8f0（不是#94a3b8这种中灰），确保 WCAG AA 对比度 ≥ 4.5:1 -
background-color避免纯透明或低 alpha；稳妥起见用十六进制不透明色，例如#4a5568，必要时再叠加一层rgba(74, 85, 104, 0.9) - 如果要用品牌色作高亮背景，记得同步调亮文字色——比如主色是
#2563eb，那color至少得是#f1f5f9，不能还是#333
局部覆盖时要注意 user-select 和作用域限制
给代码块、按钮或禁用区域单独设 pre code::selection 很有用，但前提是这些元素真能被选中。
-
button、input默认user-select: none，写了button::selection也无效 - Vue/React 组件 scoped CSS 里写
::selection，会因选择器提升失效，实际影响的是整个页面 - 想让代码块选中变黄底，应该写
pre code::selection，而不是pre::selection—— 后者会把整块<pre class="brush:php;toolbar:false;"></pre>都高亮，包括行号 - 某些富文本编辑器（如 TipTap）内部用
contenteditable，其选中行为由浏览器控制，但样式仍走::selection，需确保它没被 inline style 或更高权重要素覆盖
和 prefers-color-scheme 媒体查询配合的坑
很多人把 ::selection 套进 @media (prefers-color-scheme: dark) 就以为万事大吉，但 Firefox 对媒体查询内 ::selection 支持不稳定，且 Safari 在系统主题切换后不会自动重算该伪类样式。
- 不要只依赖媒体查询：全局先写一套基础
::selection，再在媒体查询里覆盖，确保降级可用 - 若需手动触发（比如用户点“切主题”按钮），得用 JS 强制刷新样式表或 toggle class，仅靠改
:root变量对::selection无效 -
color-scheme: dark必须写在:root或html上，否则表单控件选中态（如<input>里的光标）仍按亮色逻辑渲染，和你的::selection不匹配 - 移动端 iOS Safari 对
::selection支持极弱，长按选中文本时可能根本不出高亮——此时别强求，优先保障核心内容可读即可
实际最易被忽略的一点：你写的 ::selection 样式是否真被应用了？打开 DevTools → Elements → 选中一段文字 → 看 Computed 面板里 color 和 background-color 的来源。很多时候问题不在写法，而在某处更早定义的通用重置样式（比如 * { color: transparent }）悄悄劫持了上下文。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
