html - CSS :not pseudo-class applying broadly and not targeting specific element

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. Universal selector

If a universal selector represented by * (i.e. without a namespace prefix) is not the only component of a sequence of simple selectors selectors or is immediately followed by a pseudo-element, then the * may be omitted and the universal selector's presence implied.

因此，你的规则是:

:not(.mind) {
  color: red
}

... 表示将红色应用到所有元素，但类 mind 的元素除外。

好的，除了在这种情况下，the color property is inheritable ，所以即使红色没有应用到 .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>

为了您的特定目标:

I want to color all text red except for .mind.

使用更具体的选择器。

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

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

这也行:

div.child:not(.mind) {
  color: red;
}

div.child: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>