JS/CSS时段主题切换问题：仅末尾类样式生效求助

你的核心问题出在CSS选择器写法错误，导致所有时段的.content、.btn样式被最后定义的类（比如sunrise）覆盖。

错误原因 #

你写的.night-mode, .content是并列选择器，意味着：

• 同时选中带有.night-mode类的元素，和所有带有.content类的元素
• 因为每个时段都写了, .content，后面的.content样式会覆盖前面的（优先级相同，后定义的生效）
• 这就导致不管body切换到哪个时段类，.content永远应用最后一段CSS里的样式

正确写法：使用后代选择器 #

要实现“当body有某个时段类时，其子元素应用对应样式”，需要用后代选择器（父类 子类），比如.night-mode .content，表示“所有在带有.night-mode类的元素内的.content元素”。

修正后的CSS代码 #

/* 夜间模式 */
.night-mode {
  background: linear-gradient( to bottom, rgb(34, 34, 34), rgb(0, 40, 60), rgb(0, 143, 213));
}

.night-mode .content {
  background-color: rgba(228, 228, 228, 0.815);
  color: #bebebe;
}

.night-mode h1 {
  color: #bebebe;
}

/* 日落模式 */
.sunset {
  background: linear-gradient(to top, rgb(255, 7, 7), rgb(255, 255, 5));
}

.sunset .content {
  background-color: rgba(27, 27, 27, 0.397);
  color: rgb(26, 26, 26);
}

.sunset h1 {
  color: rgb(26, 26, 26);
}

/* 日间模式 */
.day-mode {
  background: linear-gradient( to top, rgb(238, 254, 183), rgb(169, 254, 222), rgb(90, 222, 255));
}

.day-mode .content {
  background-color: rgba(161, 211, 192, 0.336);
  color: #383838;
}

.day-mode h1 {
  color: #383838;
}

.day-mode .btn {
  border-color: #383838;
}

.day-mode .btn:hover {
  background-color: #383838;
}

/* 日出模式 */
.sunrise {
  background: linear-gradient(to top, rgb(248, 250, 107), rgb(238, 148, 148));
}

.sunrise .content {
  background-color: rgba(197, 103, 103, 0.26);
  color: rgb(56, 56, 56);
}

.sunrise .btn {
  border-color: rgb(133, 133, 133);
}

.sunrise .btn:hover {
  background-color: rgb(133, 133, 133);
}

.sunrise h1 {
  color: rgb(56, 56, 56);
}

为什么这样能解决问题 #

• 后代选择器（比如.night-mode .content）的优先级是两个类选择器，比单独的.content（一个类选择器）优先级更高，不会被其他时段的样式覆盖
• 只有当body拥有对应时段类时，其子元素才会应用对应的样式，完全符合你的需求

你的JS代码是正常的，不需要修改，只要替换CSS即可实现所有元素同步切换样式。

内容的提问来源于stack exchange，提问作者uncanny-vegan-taco