样式不适用于亮模式/暗模式。正在应用级联中的最后一个样式[重复]

问题描述 投票:1回答:1

我正在尝试使用明暗模式构建应用程序。CSS看起来像这样:

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

我不明白,即使应用.light-mode类,也仍然应用.dark-mode样式。

类.dark-mode和.light-mode被赋予包装的div元素。

css
1个回答
2
投票

如果包装的div元素的类如您所提到的处于.light-mode和.dark-mode,则需要分别选择那些容器中的每个元素。

[当前,您的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镜头,我不确定。让我知道是否还有其他需要帮助的地方。

© www.soinside.com 2019 - 2024. All rights reserved.