CSS-Verschachtelung und Spezifität
Die Spezifität des &
-Verschachtelungs-Selektors wird basierend auf der höchsten Spezifität in der zugehörigen Selektorliste berechnet. Dies ist identisch mit der Art und Weise, wie die Spezifität bei der Verwendung der :is()
-Funktion berechnet wird.
<b class="foo">
<c>Blue text</c>
</b>
&
-Verschachtelungssyntax
#a, b {
& c {
color: blue;
}
}
.foo c {
color: red;
}
:is()
-Syntax
:is(#a, b) {
& c {
color: blue;
}
}
.foo c {
color: red;
}
In diesem Beispiel hat der ID-Selektor (#a
) eine Spezifität von 1-0-0
, während der Typ-Selektor (b
) eine Spezifität von 0-0-1
hat. Der &
-Verschachtelungs-Selektor und die :is()
-Pseudo-Klasse haben beide eine Spezifität von 1-0-0
, obwohl der #a
-ID-Selektor nie verwendet wird.
Der .foo
-Klassen-Selektor hat eine Spezifität von 0-1-0
. Dies ergibt eine Gesamtspezifität von 1-0-1
für & c
und 0-1-1
für .foo c
, was bedeutet, dass color: blue;
Vorrang hat.