2015-11-11 4 views
5

Dies ist wahrscheinlich eine wirklich dumme Frage, aber ich kann nicht die: nicht Selektor in CSS arbeiten. Ich möchte den gesamten Text auf meiner Seite färben, es sei denn, er hat eine Klasse namens "nocolor". Hier ist der Code, ich sehe nicht das Problem:CSS: nicht Selektor funktioniert nicht

*:not(.nocolor) { 
 
    color: #f00; 
 
}
<h2>Hello</h2> 
 
<h2 class="nocolor">Hello</h2>

+0

Ich würde wirklich gerne wissen, warum das der Fall ist. Jeder Browser, in dem ich ihn getestet habe, hatte das gleiche Verhalten. Ich kann mir vorstellen, dass es irgendwo in der Spezifikation sein muss. –

Antwort

3

Ich war von diesem Verhalten überrascht, aber das * Selektor gilt für alles so müssen Sie Ausschau nach Anwendung Eltern Elemente (wie body und html tags selbst).

Sie können das Problem beheben, indem body an den Wähler Hinzufügen, etwa so:

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

Es funktioniert, danke! –

+1

Hinzufügen von '* {color: # 000;/* oder was auch immer * /} 'vor dem' *: not() 'Selektor funktioniert auch. –

+0

Kann der Nicht-Selektor auf alle darin enthaltenen Kinder angewendet werden? Wenn ich die Farbe eines p-Tags ändern möchte, das sich in einem div mit der nocolor-Klasse befindet, funktioniert es nicht –

2

Ihre Wähler sollte wie so geschrieben werden:

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

die '*' entfernen, und dies wird wählen alles auf der Seite.

Siehe docs hier: MDN

2

Es ist, weil * auf jedes Element angewendet wird, einschließlich body, die nicht die .nocolor Klasse hat.