:not()伪选择器在某些标记中工作不正确

Question

HTML:

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

CSS：

:not(p){
color:red;}

：not((pseudo-class应该选择HTML文档中所有不是"p"的元素，并为它们赋予红色，但当我运行代码时，"p"也像所有其他元素一样是红色的。

Answer 1

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

以下是你需要在你的风格中添加的内容：

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

Answer 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*/
}

Answer 3

需要首先指定<p>标记的颜色。请参阅w3schools中的示例。

p {
color: black;
}
:not(p) {
color: red;
}

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