css :not() 选择器不适用于通用选择器 (*)

Question

海伊

看起来 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>

css :not() selector not working with universal selector (*)