Spezifitätsregeln in CSS

Im vorherigen Beispiel waren beide Selektoren gleich und hatten die gleiche Priorität. Das bedeutet, dass die Eigenschaft gewann, die weiter unten geschrieben wurde.

Es gibt auch Situationen, in denen auf ein Element mehrere Selektoren zutreffen. In diesem Fall gewinnt bei konfligierenden Eigenschaften der spezifischere, also der genauere Selektor. Lassen Sie uns die Spezifitätsregeln betrachten.

Erste Regel

Eine Klasse schlägt immer den Tag-Selektor:

<p class="text">text</p>

p {
	color: red;
}
.text {
	color: green; /* diese Farbe wird angewendet */
}

Zweite Regel

Eine ID schlägt immer eine Klasse:

<p id="elem" class="text">text</p>

.text {
	color: red;
}
#elem {
	color: green; /* diese Farbe wird angewendet */
}

Dritte Regel

Unter gleichen Bedingungen gewinnt der Selektor, der mehr Teile hat. Wenn wir beispielsweise zwei Tag-Selektoren haben, gewinnt derjenige, der mehr Tags hat:

<div>
	<p>text</p>
</div>

p {
	color: red;
}
div p {
	color: green; /* diese Farbe wird angewendet */
}

Wenn es zwei Klassen-Selektoren sind, gewinnt derjenige, in dem mehr Klassen angegeben sind (wenn dort Tag-Selektoren vorhanden sind, haben diese keinen Einfluss):

<div class="block">
	<p class="text">text</p>
</div>

.text {
	color: red;
}
.block .text {
	color: green; /* diese Farbe wird angewendet */
}