css:not()选择器不能与通用选择器(*)一起使用 [英] css :not() selector not working with universal selector (*)

问题描述

海伊

看起来像CSS选择器:not()在 * 选择器中无法很好地工作.

Looks like the css selector :not() doesn't work well with the * selector.

可以解决吗?还是我做错了什么?

Any way around it? Or am I doing something wrong?

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

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

我仍然得到绿色的'am'.

提前谢谢！

推荐答案

通用选择器( * )并不是问题.这是对 color 属性的继承.

The universal selector (*) is not the problem. It's the inheritance on the color property.

当你说...

*:note(.nope)

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

that's fine, but you're forgetting that * applies the color to the body and html elements, as well.

所以 .nope 从其父级获取绿色.

So .nope gets the green from its parent.

如果您使用未继承的属性(例如 border )，则不会出现此问题.

If you use a property that is not inherited (like border) you won't have this problem.

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

* {
  margin: 5px;
}

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

请注意 .nope 如何不获得边框.

Notice how .nope doesn't get the border.

要使颜色能按需要工作，请更具体.

For the color to work as you want, be more specific.

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

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

这篇关于css:not()选择器不能与通用选择器(*)一起使用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！