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

如果由* 表示的通用选择器（即没有命名空间 prefix) 不是一系列简单选择器的唯一组成部分 选择器或紧跟一个伪元素，然后是* 可以省略并暗示通用选择器的存在。

因此，你的规则是：

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

为了您的特定目标：

我想将除.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>

Answer 2

您的选择器工作正常，因为 :not(.mind) 与 *:not(.mind) 相同 - 这是一个通用选择器 - 但是 因为 .mind 是 .parent 的子级，它会得到 color:red继承自.parent，这就是为什么你看到它是红色的。

为了简化，在这种情况下不需要使用: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 类，在这种情况下，您可以像这样使用 :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 3

它以父选择器为目标，而子 (.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 4

你可以使用: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>