Question

尝试不覆盖代码库中的某些现有CSS。

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

.existing-class {
    ...some old styles
}

我已经尝试过了，我知道这是行不通的，我知道为什么：

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

但是我无法弄清楚有什么方法（或者如果有）可以完成我想要的事情。

基本上，我只希望样式在某些元素没有某个类的祖先（树中任何地方）的情况下适用。或者也许有人可以建议一种更好的方法？

谢谢！

Answer 1

感谢@Temani告诉我我需要一种新方法。我将为可能遇到此问题的其他人回答我的问题。

我更改了HTML代码，以便知道.my-new-class在祖先树中的位置（使其成为第二个祖先），因此我能够做到这一点：

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

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

HTML：

<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>

当元素没有某个类别的祖先时，我该如何有选择地应用CSS

1 个答案: