CSS:not伪类不起作用 [英] CSS :not pseudo-class not working

问题描述

我正在学习:not()伪类，它不能按预期工作.

I am learning about the :not() pseudo class and it is not working as expected.

我想将除.mind以外的所有文本都涂成红色.由于某些原因，这不能防止.mind元素变为红色.

I want to color all text red except for .mind. For some reason this is not preventing the .mind element from being red.

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

推荐答案

请记住这一点:

:not()等效于*:not()

如果没有选择器作为:not()伪类的前缀，则意味着使用通用选择器:

When there is no selector prefixing the :not() pseudo-class, a universal selector is implied:

6.2.普遍的 选择器

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.

因此，您具有以下规则:

Therefore, the rule you have:

:not(.mind) {
  color: red
}

...说的是对除元素mind之外的所有元素都应用红色.

... is saying apply red color to all elements except the element with the class mind.

好的，除了这种情况外， color属性是可继承的，因此即使红色未应用于.mind元素，它仍然通过继承.parent元素而获得红色.

Okay, except in this case, the color property is inheritable, so even though the red doesn't get applied to the .mind element, it still gets the red through inheritance from the .parent element.

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

Here's what the browser is doing:

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

A quick way to test this behavior is with the border property, which is not inheritable.

在下面的示例中，使用选择器，您会注意到边框没有应用到.mind，并且选择器的工作原理与您期望的一样:

In the example below, using your selector, you'll notice that the border doesn't get applied to .mind, and your selector works as you were expecting:

: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之外的所有文本都涂成红色.

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伪类不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！