当一个元素没有某个类的祖先时,如何有选择地应用CSS

感谢 @Temani 因为你告诉我我需要一个新的方法。我要为任何可能遇到我的问题的人回答我的问题。

我修改了我的HTML代码,以便知道 .my-new-class 在祖先树中(使它成为第二个祖先),所以我可以这样做:

.my-new-class {
   .existing-class {
      ...some new styles
   }
}

.existing-class {
   &:not(.my-new-class)>*>& {
    ...some old styles
   }
}

<div class="existing-class">
   ...with the old style
</div>

<div class="my-new-class">
  <some-element>
    <div class="existing-class">
      ...with the new style
    </div>
  </some-element>
</div>