Question

是否可以将某些CSS应用于任何元素，除了某个类的后代？

正如您所看到的，我希望页面上的所有内容都为dark，而light类的后代除外。这里的诀窍是，人们无法知道该元素是否是直接后代，例如可能是这样的：

<div class="light">
  <p>Element</p>
</div>

但也可能是这样：

<div class="light">
  <div>
    <div>
      <p>Element</p>
    </div>
  </div>
</div>

dark类几乎总是添加到body元素中，并且始终是任何light类的父级。

有人可能会说：

只需使身体＆＃34;轻盈＆＃34;并将dark类添加到您需要的任何元素中。 - 但实际上我需要相反，我需要将所有内容dark和某些元素light。
然后添加＆＃34; light＆＃34;样式并将light类添加到您需要的元素。 - 我已经拥有dark样式，因此我正在寻找一个更容易的＆＃34;排除＆＃34;解决方案（我使用LESS，因此前缀等非常简单）。

Answer 1

Color是一种继承属性。因此，仅仅通过声明.dark和.light来获得想要的颜色是一件好事。您可以通过将其指定给正文来设置默认值。我认为像这样的原子设计是一种很好的做法，因为你不会在你的CSS中添加过多的特异性。

你可以这样做：

body {
    color: #ccc;
}
.dark {
    color: #000;
}
.light {
    color: #fff;
}

Answer 2

如果不编写单独的选择器，您将无法以这种方式排除后代。由于here所述的原因，即使使用:not()，您也无法做到这一点。

幸运的是，.light元素只会在.dark元素的上下文中出现而反之亦然会使这一点变得容易一些。由于您已经有body CSS规则，只需将.light p添加到该规则，然后将整个规则集移到.dark p下方，以便.light p优先：

.dark p {
    color: #000;
}

body, .light p {
    color: #ccc;
}

或者，如果您希望将body规则放在最前面，可以提高.light p的特异性，以确保它优先：

body, body .light p {
    color: #ccc;
}

.dark p {
    color: #000;
}