html - 如何选择除特定类及其后代之外的所有元素？

Question

如何使用 CSS 选择除特定类及其后代之外的所有元素？

例如，我想在下面的代码中选择除 .my-class 及其后代之外的所有元素。我尝试了 :not(.my-class *) 但它不起作用。

在我的元素中有很多复杂的全局样式，很难全部修复。所以我不能像@Michael_B 回答的那样编辑所有这些样式。我只是不想在 .my-class 及其后代中应用这些样式而不进行大的更改。

<div>
  <span>a</span>
  <div>
    <span>b</span>
  </div>
  <div class="my-class">
    <span>c</span>
    <div>
      <span>d</span>
      <div>
        <span>e</span>
      </div>
    </div>
  </div>
</div>

Answer 1

单独使用 CSS，在浏览器实现 Selectors Level 4 之前，我会说你需要多个选择器:

*:not(.my-class) {
  color: red;
  font-weight: bold;
}

.my-class * {
  color: initial;
  font-weight: normal;
}

<div>
  <span>a</span>
  <div>
    <span>b</span>
  </div>
  <div class="my-class">
    <span>c</span>
    <div>
      <span>d</span>
      <div>
        <span>e</span>
      </div>
    </div>
  </div>
</div>