样式未应用于浅色模式/深色模式.级联中的最后一种样式正在应用

Question

我正在尝试构建一个具有明暗模式的应用程序。css如下所示：

.light-mode li,
p,
input,
time,
span,
a {
color: var(--bravo);
}
.dark-mode li,
p,
input,
time,
span,
a {
color: var(--bravoDark);
}

我不明白，即使应用了.浅色模式类，.深色模式样式仍然适用。

类.ddark模式和.light模式被赋予包装div元素。

Answer 1

如果包装div元素的类处于.light模式和.dark模式，则需要分别选择这些容器中的每个元素。

目前，您的CSS只对li应用明暗模式，因为您已经用逗号分隔了其余元素，这意味着您不分青红皂白地选择了p、input、time、span和a。将您的代码更改为：

.light-mode li,
.light-mode p,
.light-mode input,
.light-mode time,
.light-mode span,
.light-mode a {
color: var(--bravo);
}
.dark-mode li,
.dark-mode p,
.dark-mode input,
.dark-mode time,
.dark-mode span,
.dark-mode a {
color: var(--bravoDark);
}

这应该可以解决您的查询，但若并没有HTML的镜头，我不能确定。如果还有什么我可以帮忙的，请告诉我。