CSS:不是伪类不工作

Question

我正在学习:not()伪类,它没有按预期工作.

我想把所有文字的颜色都换成红色.mind.由于某种原因,这不会阻止.mind元素变红.

:not(.mind) {
  color: red
}

<div class='parent'>
  <div class='child'>One</div>
  <div class='child'>Two</div>
  <div class='child'>Three</div>
  <div class='child'>One</div>
  <div class='child'>Two</div>
  <div class='child'>Three</div>
  <div class='child'>One</div>
  <div class='mind'>mind</div>
  <div class='child'>Three</div>
  <div class='child'>
    <p>First paragraph</p>
  </div>
</div>

Answer 1

记住这一点:

:not() 相当于 *:not()

当:not()伪类没有前缀的选择器时,暗示了一个通用选择器:

6.2.通用选择器

如果由*(即没有名称空间前缀)表示的通用选择器不是简单选择器序列序列的唯一组件或者紧跟着伪元素,则* 可以省略并且隐含通用选择器的存在.

因此,你有这样的规则:

:not(.mind) {
  color: red
}

...说是将红色应用于除了具有类的元素之外的所有元素mind.

好吧,除了在这种情况下,该color属性是可继承的,所以即使红色不应用到.mind元素,它仍然通过继承从得到的红色 .parent元素.

这是浏览器正在做的事情:

测试此行为的一种快速方法是使用border属性,该属性不可继承.

在下面的示例中,使用选择器,您会注意到边框未应用.mind,并且您的选择器按预期工作:

:not(.mind) {
  color: red;
  border-bottom: 1px dashed black;
}

<div class='parent'>
  <div class='child'>One</div>
  <div class='child'>Two</div>
  <div class='child'>Three</div>
  <div class='child'>One</div>
  <div class='child'>Two</div>
  <div class='child'>Three</div>
  <div class='child'>One</div>
  <div class='mind'>mind</div>
  <div class='child'>Three</div>
  <div class='child'>
    <p>First paragraph</p>
  </div>
</div>

为了您的特定目标:

我想把所有文字的颜色都换成红色.mind.

使用更具体的选择器.

.parent > :not(.mind) {
  color: red;
}

<div class='parent'>
  <div class='child'>One</div>
  <div class='child'>Two</div>
  <div class='child'>Three</div>
  <div class='child'>One</div>
  <div class='child'>Two</div>
  <div class='child'>Three</div>
  <div class='child'>One</div>
  <div class='mind'>mind</div>
  <div class='child'>Three</div>
  <div class='child'>
    <p>First paragraph</p>
  </div>
</div>