css :not() selector not working with universal selector (*) [duplicate]

眉间皱痕 提交于 2021-01-28 16:44:51

问题


Haii

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>

I still get 'am' as green.

Thanks in advance!


回答1:


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

When you say...

*:note(.nope)

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

So .nope gets the green from its parent.

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>

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>


来源:https://stackoverflow.com/questions/62415798/css-not-selector-not-working-with-universal-selector

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!