是否可以将“经典”CSS 规则与包含相同样式的媒体查询合并？-PHP中文网问答

我想知道是否可以组合应用于同一元素并包含相同样式的 2 个规则，但其中一个规则位于媒体查询中并得到类似于以下内容的内容：

.a,
.b .a {
  color: white;
  background-color: black;
}

规则是：

根据 prefers-color-scheme 将颜色应用于 .content，
当 input 为 checked 时，更改 .content 颜色

: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);
}


dark

light

default

Test

如果 prefer-color-scheme 为深色，或者选中 #dark-theme，则此处 .content 将获得黑色背景和白色。

这两个规则应用相同的样式。

有没有办法结合这些规则？

:root { --dark-color: white; --dark-bg: black; --light-color: black; --light-bg: white; } @media (prefers-color-scheme: dark) { #default-theme:checked~.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) { #default-theme:checked~.content { color: var(--light-color); background-color: var(--light-bg); } } #light-theme:checked~.content { color: var(--light-color); background-color: var(--light-bg); }