为何safari浏览器在暗黑模式下某些网页的文字颜色显示不全？

暗黑模式下Safari网页选中文本文字“消失”，因::selection未显式定义color和background-color，导致fallback为黑色文字叠在深色背景上；须同时声明::selection和::-moz-selection，禁用alpha通道色，全局置于CSS顶部并确保加载。

暗黑模式下Safari网页文字颜色显示不全，本质是浏览器未显式重写::selection伪元素的color和background-color，导致选中文本时文字直接“消失”在深色背景里——尤其在GitHub、Notion或自建文档站中高频出现。

根本原因：::selection不继承父级文本色

父元素设了color: #e2e8f0，但::selection里没写color→文字颜色fallback到浏览器默认值（通常是黑色），深色背景下就看不见了。

【必须同时定义::selection和::-moz-selection】，否则Firefox下完全不生效；Safari对带alpha通道的background-color（如#3b82f680）渲染异常，背景“变透明”，文字直接叠在深色容器上。

修复方案：全局兜底写法

第一步：在CSS全局样式表最顶部添加以下规则：

::selection, ::-moz-selection {
  color: #f1f5f9;
  background-color: #4a5568;
}

第二步：确保该CSS被所有页面加载，不要放在scoped样式块或组件内——Vue/React中::selection写在scoped CSS里会因选择器提升失效，实际影响的是整个页面。

第三步：验证对比度。暗黑模式下color至少用#e2e8f0（不是#94a3b8这种中灰），确保WCAG AA级对比度≥4.5:1；background-color避免纯透明或低alpha，稳妥起见用十六进制不透明色。

局部覆盖：只对可选中文本生效

方法一：给代码块单独高亮

写pre code::selection，而不是pre::selection——后者会把整块<pre>都高亮，包括行号。

方法二：避开无效区域

【button、input默认user-select: none】，写了button::selection也无效；想让输入框支持选中高亮，得先加user-select: text。