修改CSS变量更改单选按钮颜色，theme.dev.css中修改不生效如何解决

问题核心原因 #

修改不生效是因为CSS选择器优先级差异：你在:root和.palette--light中定义的--text-dark变量，优先级低于后续.text--*系列类的同名变量定义，修改被高优先级的规则覆盖。也有可能是浏览器缓存了旧的CSS文件导致修改不生效。

可行解决方法 #

• 方法1：修改对应.text--*类的变量
  打开浏览器检查器，查看单选按钮的祖先元素，确认是否带有text--neutral/text--primary/text--secondary这类类名，找到实际生效的类后，修改对应类下的--text-dark值即可。比如单选按钮祖先带text--neutral类，就修改对应代码：

  .text--neutral {
    --text-dark: red;
    --text: var(---color-text);
    --text-light: var(---color-text-light);
  }
  

• 方法2：直接修改基础变量
  你当前使用的--text-dark继承自三个横杠开头的基础变量---color-text-dark，直接找到这个基础变量的定义位置，将值改为red，所有依赖这个变量的样式都会同步生效，无需挨个修改派生变量。
• 方法3：给单选按钮单独指定样式（不影响其他元素）
  直接给单选按钮元素设置专属变量，优先级最高不会被覆盖：

  input[type="radio"] {
    --text-dark: red;
  }
  

• 方法4：清除缓存
  修改完CSS文件后按Ctrl+Shift+R（Windows）/Command+Shift+R（Mac）硬刷新浏览器，强制加载最新的CSS文件。

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