基于body类无法覆盖多个CSS选择器的问题排查

问题核心 #

你遇到的问题源于对CSS逗号分隔选择器规则的误解，导致大部分选择器脱离了body.dark的前缀约束。

错误代码的问题所在 #

看你写的深色模式样式：

body.dark .token.function, .token.namespace, .token.pseudo-element, .token.class, .token.class-name, .token.pseudo-class, .token.id, .token.url-reference .token.variable, .token.attr-name {
  color: blue;
}

CSS里的逗号是用来分隔完全独立的选择器的，也就是说：

• 只有第一个选择器body.dark .token.function是依赖body.dark类的
• 后面的.token.namespace、.token.pseudo-element等所有选择器，都是独立存在的——它们和body.dark没有任何关联，不管body有没有dark类，这些选择器都会匹配对应的元素

再加上这段蓝色样式写在红色样式之后，根据CSS的“层叠顺序”规则，后面的样式会覆盖前面的，所以不管body有没有dark类，这些元素都会被应用蓝色。

单个选择器正常的原因 #

当你只写单个选择器时：

.token.function {
  color: red;
}

body.dark .token.function {
  color: blue;
}

这里的body.dark .token.function是一个完整的、依赖body.dark的选择器，只有当body存在dark类时，这个选择器的优先级才会高于.token.function，蓝色才会生效；没有dark类时，就只有红色样式生效，所以表现符合预期。

修复方法 #

给每一个选择器都加上body.dark前缀，确保所有样式都依赖body.dark类的存在：

body.dark .token.function, 
body.dark .token.namespace, 
body.dark .token.pseudo-element, 
body.dark .token.class, 
body.dark .token.class-name, 
body.dark .token.pseudo-class, 
body.dark .token.id, 
body.dark .token.url-reference .token.variable, 
body.dark .token.attr-name {
  color: blue;
}

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