CSS :not selector doesn't work

Question

This is probably a really stupid question, but I can't get the :not selector to work in css. I want to color all text in my page unless it has a class called "nocolor". Here's the code, I don't see the problem:

 *:not(.nocolor) { color: #f00; } 

 <h2>Hello</h2> <h2 class="nocolor">Hello</h2> 

Answer 1

I was surprised by this behavior but the * selector applies to everything so you have to look out for application to parent elements as well (like body and html tags themselves).

You can fix it by adding body to the selector, like so:

body *:not(.nocolor) {
   color: red;
}

Answer 2

Your selector should be written like so:

:not(.nocolor) {
    color: #f00;
}

Remove the '*', and this will select everything on the page.

See docs here: MDN

Answer 3

这是因为*应用于包含body每个元素，而没有.nocolor类。