CSS:不是伪类不工作

记住这一点:

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

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

6.2.通用选择器

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

因此,你有这样的规则:

:not(.mind) {
  color: red
}

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

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

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

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

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

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

  
One
  
Two
  
Three
  
One
  
Two
  
Three
  
One
  
mind
  
Three
  

    
First paragraph