css：not（）选择器不适用于通用选择器（*）

Question

Haii

看起来像css选择器:not()与*选择器不能很好地工作。

可以吗？还是我做错了？

*:not(.nope){
  color: green;
}

<div>hai</div>
<div>I</div>
<div class="nope">am</div>
<div>Jhon</div>

我仍然得到'am'为绿色。

提前感谢！

Answer 1

通用选择器（*）没问题。这是color属性的继承。

当你说...

*:note(.nope)

很好，但是您忘记了*也将颜色应用于body和html元素。

所以.nope从其父级获得绿色。

如果使用不继承的属性（例如border），则不会出现此问题。

*:not(.nope){
  border: 1px solid red;
}

* {
  margin: 5px;
}

<div>hai</div>
<div>I</div>
<div class="nope">am</div>
<div>Jhon</div>

注意.nope如何不获得边界。

为了使颜色能根据需要工作，请更具体。

div:not(.nope) {
  color: green;
}

<div>hai</div>
<div>I</div>
<div class="nope">am</div>
<div>Jhon</div>