CSS :not pseudo-class 不工作

Question

我正在了解 :not() 伪 class，它没有按预期工作。

我想将除 .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(.mind) 与 *:not(.mind) 相同 - 这是通用选择器 - 但因为 .mind 是.parent 的子代将从 .parent 继承 color:red，这就是为什么你看到它是红色的。

为了简化，在这种情况下不需要使用:not()只需使用.child

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

但是，如果您希望 .mind div 也具有 .child class，在这种情况下，您可以像这样使用 :not()：

.child:not(.mind) {rules}

片段

.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='child mind'>mind</div>
  <div class='child'>Three</div>
  <div class='child'>
    <p>First paragraph</p>
  </div>
</div>

Answer 2

它以父选择器为目标，子 (.mind) 正在继承它。如果 .mind 没有从父级继承颜色，代码就可以正常工作。

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

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

在这种情况下，您需要专门为 .mind 定义规则。

Answer 3

您可以使用:not如下：

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

Answer 4

记住这一点：

:not() 等同于 *:not()

当 :not() pseudo-class 前没有选择器前缀时，隐含通用选择器：

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
}

... 表示 将红色应用到所有元素，除了具有 class mind 的元素。

好的，除了在本例中，the color property is inheritable，所以即使红色没有应用到 .mind 元素，它仍然通过从 [=23= 继承得到红色]元素。

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

测试此行为的快速方法是使用不可继承的 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>

给你特别的objective:

I want to color all text red except for .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>

CSS :not pseudo-class 不工作

CSS :not pseudo-class not working

html

css

css-selectors

pseudo-class