CSS-Verschachtelung und Spezifität
Die Spezifität des &-Verschachtelungsselectors wird unter Verwendung der größten Spezifität in der zugehörigen Selektorliste berechnet. Dies ist identisch mit der Art und Weise, wie die Spezifität unter Verwendung der :is()-Funktion berechnet wird.
html
<b class="foo"> <i>Blue text</i> </b> &-Verschachtelungssyntax
css
#a, b { & i { color: blue; } } .foo i { color: red; } :is()-Syntax
css
:is(#a, b) { & i { color: blue; } } .foo i { 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. Sowohl der &-Verschachtelungsselektor als auch die :is()-Pseudoklasse nehmen eine Spezifität von 1-0-0 an, obwohl der #a ID-Selektor nie verwendet wird.
Der .foo-Klassenselektor hat eine Spezifität von 0-1-0. Dies macht die Gesamtspezifität zu 1-0-1 für & i und 0-1-1 für .foo i, was bedeutet, dass color: blue; gewinnt.