css -not selector- bricht Vorrang?

In einer CSS-Datei hat der zuletzt definierte Stil Vorrang vor den zuvor definierten.css -not selector- bricht Vorrang?

Aber bei der Verwendung der not selector, wird die Priorität gebrochen und die Klasse mit der not selector erhält Vorrang, obwohl es an der Spitze der Datei befindet.

Was ist die Logik hinter der Vorrangspalte?

Example:

<html> 
    <head> 
    <link rel="stylesheet" href="style.css"> 
    <script src="script.js"></script> 
    <style> 
     .red-with-not:not(.something) { 
     background: red; 
     } 
     .red { 
     background: red; 
     } 
     .blue { 
     background: blue; 
     } 
    </style> 
    </head> 
    <body class="base"> 
    <h1 class="blue red-with-not">Expected Blue - PROBLEM</h1> 
    <h1 class="blue red">Expected Blue - Great!</h1> 
    </body> 
</html>

Ergebnis:

Quelle

2015-12-28 AlikElzin-kilaka

Sie sagen:

In einer CSS-Datei, die zuletzt definierten Stil Vorrang gegenüber früheren definierten

Nicht so schnell ... eine Klasse mit höherer Spezifität hat Vorrang vor dem Takes Reihenfolge, in der die Klassen im CSS erscheinen! (spec - Beachten Sie, wie ‚Spezifität‘ erscheint vor ‚Reihenfolge des Erscheinens‘ in der Liste)

Wie würden Sie die Spezifität der oben genannten Klassen berechnet werden?

Vom w3c spec:

Selektoren in der Negation pseudo-Klasse wie jede andere, gezählt, sondern die Negation selbst zählt nicht als Pseudo-Klasse.

So ist die Spezifität des Wählers .red-with-not:not(.something) =

/* a=0 b=2 c=0 -> specificity = 020 (two class selectors) */

a = # ID-Selektoren im Selektor,

b = # Klasse Selektoren Selektoren Attribute und Pseudo -Klassen im Selektor und

c = # Selektoren und Pseudo-Elemente im Selektor eingeben

Im Gegensatz zu den anderen Selektoren .red und .blue - die eine Spezifität von nur 010 (ein Klassenselektor) haben.

Falls Sie interessiert sind, ist specificity calculator eine gute Referenz für die Berechnung der Spezifität.

Quelle

2015-12-28 09:07:28 Danield

Die Spezifität für .red-with-not:not(.something) kommt aus '0020' zu sein, während für .red oder .blue '0010' zu sein, kommt heraus. Daher ist der Vorrang .red-with-not:not(.something) gegeben.

Bitte beachten Specifics on CSS Specificity für mehr Verständnis.

Quelle

2015-12-28 08:57:46

css -not selector- bricht Vorrang?

Antwort

Verwandte Themen