只有在祖先不包含某个类的情况下才可以应用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.一般兄弟姐妹选择器 ~

您可以使用通用兄弟选择器,它将适用于您的情况,因为您.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>

附加课程

如果您不想删除<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>提供额外的类,则可以将父级使用直接子选择器>:

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>

4. 或5.在我的情况下我更喜欢.