:not() 伪选择器对某些标签不正确答案

【问题标题】：:not() pseudo selector works incorrect with some tags:not() 伪选择器对某些标签不正确
【发布时间】：2020-05-10 00:07:35
【问题描述】：

HTML：

<p>I`m p</p>
<a>I`m a</a>
<h2>I`m h2</h2>

CSS：

:not(p){
 color:red;}

:not() 伪类应该选择 HTML 文档中所有不是“p”的元素，并赋予它们红色，但是当我运行代码时，“p”也是红色的，就像所有其他元素。

【问题讨论】：

【解决方案1】：

这里你需要为所有的 html 元素指定颜色。由于没有为元素设置颜色，因此选择器的颜色将设置为所有可用的元素。

以下是您需要在样式中添加的内容：

*{
      color: black;/* the color you will want for all or p elements. */
    }

【讨论】：

【解决方案2】：

Notorious Zet 你可以通过给 p 元素一个类然后使用非伪选择器来修复这个错误

HTML

<p class = "notRed"> This is a p element </p>
<h1>This is a h1 element</h1>

CSS

p:not(notRed){
color: red /*This will apply to all p elements with the class of notRed*/
}

【讨论】：

【解决方案3】：

需要先指定<p>标签的颜色。请参阅 w3schools 的 example。

p {
  color: black;
}

:not(p) {
  color: red;
}

<p> I am p </p>
<a href="#"> I am a </a>
<h1> I am h1 </h1>

【讨论】：