Chrome中使用CSS自定义属性设置选中文本颜色失效问题

下面是针对你遇到问题的几个排查和解决方向：

1. 检查Chrome实验性特性开关 #

在Chrome地址栏输入chrome://flags/#enable-experimental-web-platform-features，确认该选项处于启用状态。虽然CSS自定义变量是标准特性，但部分特殊环境下可能被意外禁用。同时可以检查chrome://flags/#enable-css-custom-properties-for-vendor-prefixes，确保相关支持项开启，修改后重启Chrome测试。

2. 排查样式优先级与变量解析 #

• 打开Chrome开发者工具（F12），选中被选中的文本元素，切换到样式面板，找到::selection的规则，查看：
  • 变量--selection-color是否被正确解析（鼠标悬停在变量上会显示实际值）
  • 是否有其他更高优先级的样式覆盖了当前规则（被覆盖的样式会被划掉）
• 可以临时给::selection的样式加上!important来测试是否是优先级问题：

::selection {
    color: white !important;
    background: var(--selection-color, red) !important;
}

3. 排除环境渲染冲突 #

你的运行环境是Ubuntu 22.04 + i3 + Nvidia，可能存在硬件加速或窗口管理器的渲染兼容性问题：

• 关闭Chrome的硬件加速：进入Chrome设置 → 系统 → 取消勾选「使用硬件加速模式（如果可用）」，重启后测试
• 尝试临时切换到其他窗口管理器（如GNOME）或改用XWayland代替X-server，验证是否是i3或X-server导致的渲染异常

4. 验证Chrome版本Bug #

Chrome 114.0.5735.198这个版本可能存在CSS变量在伪元素中失效的特定Bug：

• 升级Chrome到最新稳定版，或者回退到之前能正常运行的版本，测试问题是否消失

简化测试代码 #

使用以下极简代码测试，排除其他代码干扰：

<!DOCTYPE html>
<html>
<head>
    <style>
        :root {
            --selection-color: green;
        }
        ::selection {
            color: white;
            background: var(--selection-color, red);
        }
    </style>
</head>
<body>
    <p>选中这段文本，预期背景色为绿色，若变量失效则显示红色</p>
</body>
</html>

内容的提问来源于stack exchange，提问作者run_the_race