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

Question

解释

我不是CSS专家，但我目前的尝试就是这个。

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

我用英文读的是......

“将红色背景应用于任何没有<div class="classToBeAvoid">作为祖先的元素。”

但是，在我的测试中，它似乎不像这样。

CodePen：

https://codepen.io/anon/pen/eGVBVb

代码：

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

Answer 1

您的解释完全正确。您将红色背景应用于不属于<div>类的任何classToBeAvoid。不幸的是，这也适用于孩子<div>，这也是你的第一个<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>并将其用于选择器，即：

.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>继承.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>

1. 或5.是我喜欢的情况。