能否合并针对.content的媒体查询规则与checked选择器同样式规则？

你的需求场景如下：

• 根据prefers-color-scheme媒体查询为.content元素设置颜色样式
• 当指定radio按钮处于checked状态时，为.content应用与对应主题一致的颜色样式

当前代码中，媒体查询触发的.content样式，和radio选中后触发的.content样式完全一致，以下是具体实现方案：

原代码 #

CSS

:root {
  --dark-color: white;
  --dark-bg: black;
  --light-color: black;
  --light-bg: white;
}

@media (prefers-color-scheme: dark) {
  .content {
    color: var(--dark-color);
    background-color: var(--dark-bg);
  }
}
#dark-theme:checked~.content {
  color: var(--dark-color);
  background-color: var(--dark-bg);
}

@media (prefers-color-scheme: light) {
  .content {
    color: var(--light-color);
    background-color: var(--light-bg);
  }
}
#light-theme:checked~.content {
  color: var(--light-color);
  background-color: var(--light-bg);
}

HTML

<input type="radio" name="color-theme" id="dark-theme">
<label for="dark-theme">dark</label>
<input type="radio" name="color-theme" id="light-theme">
<label for="light-theme">light</label>
<input type="radio" name="color-theme" id="default-theme" checked>
<label for="default-theme">default</label>

<div class="content">Test</div>

可以合并，提供两种实现方式： #

方式一：直接合并选择器组

你可以将媒体查询作为选择器的一部分，和radio选中的选择器用逗号连接，共享同一套样式声明：

:root {
  --dark-color: white;
  --dark-bg: black;
  --light-color: black;
  --light-bg: white;
}

@media (prefers-color-scheme: dark) .content,
#dark-theme:checked~.content {
  color: var(--dark-color);
  background-color: var(--dark-bg);
}

@media (prefers-color-scheme: light) .content,
#light-theme:checked~.content {
  color: var(--light-color);
  background-color: var(--light-bg);
}

这种写法直接将满足相同样式的两种触发条件（系统主题命中、手动选中radio）对应的选择器归为一组，减少重复代码。

方式二：用CSS变量优化（更易维护）

通过切换根元素的CSS变量，将主题逻辑集中管理，.content只需要引用一次变量即可：

:root {
  /* 默认使用浅色主题变量 */
  --color: var(--light-color);
  --bg: var(--light-bg);
  --dark-color: white;
  --dark-bg: black;
  --light-color: black;
  --light-bg: white;
}

/* 系统主题切换变量 */
@media (prefers-color-scheme: dark) {
  :root {
    --color: var(--dark-color);
    --bg: var(--dark-bg);
  }
}

/* 手动切换主题时覆盖变量 */
#dark-theme:checked~:root {
  --color: var(--dark-color);
  --bg: var(--dark-bg);
}
#light-theme:checked~:root {
  --color: var(--light-color);
  --bg: var(--light-bg);
}

/* 仅为.content声明一次样式 */
.content {
  color: var(--color);
  background-color: var(--bg);
}

这种方式彻底避免了重复的样式声明，把主题切换逻辑集中在变量层面，后续修改主题样式时只需调整变量值即可，维护成本更低。

内容的提问来源于stack exchange，提问作者Cédric