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

你的解释是完全正确的.您正在将红色背景应用于任何< div>这不是类classToBeAvoid.不幸的是,这也适用于孩子< div> s,这是你的第一个< div>的原因.也是红色的(事实上你的第一个父母< div>不是红色,而是它的孩子).

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

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.是我在你的情况下更喜欢的.