将 CSS 应用于除某些 class 后代之外的任何元素？

Question

是否可以将某些 CSS 应用于任何元素，但某些 class 的后代除外？

如您所见，我希望页面上的所有内容都是 dark，但 light class 的后代元素除外。这里的技巧是人们无法知道该元素是否是直接后代，例如可能是这样的：

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

但也可能是这样的：

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

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

有人可能会说：

只需制作主体 "light" 并添加 dark classes 到您需要的任何元素。 - 但是我实际上需要相反的东西，我需要所有东西都是 dark 而某些元素是 light.
然后添加 "light" 样式并将 light class 添加到您需要的元素中。 - 我已经有了dark 样式，所以我正在寻找更简单的 "excluding" 解决方案（我使用的是 LESS，因此前缀等非常简单）。

Answer 1

颜色是继承的属性。因此，仅仅通过声明 .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;
}

Apply CSS to any element except for certain class descendants?