html – 只有在祖先不包含某个类的情况下才可以应用CSS吗？

div:not(.classToBeAvoid) *{
    BACkground-color:red;
}

<div class="classToBeAvoid">
  <div>
    <p>
      Shouldn't be a red BACkground on any element around here.
    </p>
  </div>
</div>

<div>
 <p>
   Should be a red BACkground
 </p>
</div>

div:not(.classToBeAvoid) *{
  BACkground-color:red;
}

解决方法

有几种方法可以解决这个问题(至少有一些权衡取舍).

1.一般兄弟选择器〜

您可以使用general siblings selector,这将适用于您的情况,因为您的.classToBeAvoid位于以下< div>之前.元素.

div~:not(.classToBeAvoid)

div~:not(.classToBeAvoid) {
  BACkground-color: red;
}

<div class="classToBeAvoid">
  <div>
    <p>
      Shouldn't be a red BACkground on any element around here.
    </p>
  </div>
</div>


<div>
  <p>
    Should be a red BACkground
  </p>
</div>

2.没有筑巢

如果情况并非总是如此(我假设),一种方法是删除你的< div>嵌套使它工作.

div:not(.classToBeAvoid) {
  BACkground-color: red;
}

<div class="classToBeAvoid">
  <p>
    Shouldn't be a red BACkground on any element around here.
  </p>
</div>


<div>
  <p>
    Should be a red BACkground
  </p>
</div>

3.附加课程

如果您不想删除< div>嵌套要么,你可以将类应用到顶级< div> s并将它们用于选择器,即：

.chosen:not(.classToBeAvoid)

.chosen:not(.classToBeAvoid) {
  BACkground-color: red;
}

<div class="chosen classToBeAvoid">
  <div>
    <p>
      Shouldn't be a red BACkground on any element around here.
    </p>
  </div>
</div>


<div class="chosen">
  <p>
    Should be a red BACkground
  </p>
</div>

4.直接子选择器>

如果你也不想给每个顶级< div>另外一个类,您可以使用direct child selector >的父级：

body>div:not(.classToBeAvoid)

body>div:not(.classToBeAvoid) {
  BACkground-color: red;
}

<div class="classToBeAvoid">
  <div>
    <p>
      Shouldn't be a red BACkground on any element around here.
    </p>
  </div>
</div>


<div>
  <p>
    Should be a red BACkground
  </p>
</div>

5.继承

此外,您可以使用您的选择器div：not(.classToBeAvoid),并且另外确保,该子< div> s继承.classToBeAvoid的行为：

.classToBeAvoid div {
  BACkground-color: inherit;
}

div:not(.classToBeAvoid) {
  BACkground-color: red;
}
.classToBeAvoid div {
  BACkground-color: inherit;
}

<div class="classToBeAvoid">
  <div>
    <p>
      Shouldn't be a red BACkground on any element around here.
    </p>
  </div>
</div>


<div>
  <p>
    Should be a red BACkground
  </p>
</div>

>或5.是我在你的情况下更喜欢的.