Spezifität von Nachfahren-Selektoren in CSS
In allen vorherigen Lektionen mussten alle Selektoren das Element selbst abfangen. Es kann vorkommen, dass ein Selektor ein Element abfängt und ein zweiter Selektor das Elternelement dieses Elements abfängt.
Sie wissen bereits, dass, wenn einem Elternelement beispielsweise eine Farbe zugewiesen wird, diese Farbe vom Nachfahren geerbt wird. Aber wenn dem Nachfahren ebenfalls eine Farbe zugewiesen wurde, hat der Selektor des Nachfahren eine höhere Spezifität als der Selektor des Elternelements.
Das bedeutet, dass der Tag-Selektor des Nachfahren die Klasse des Elternelements schlägt:
<div class="block">
<p>text</p>
</div>
.block {
color: red;
}
p {
color: green; /* diese Farbe wird angewendet */
}
:
Der Tag-Selektor des Nachfahren schlägt auch die ID des Elternelements:
<div id="block">
<p class="text">text</p>
</div>
#block {
color: red;
}
.text {
color: green; /* diese Farbe wird angewendet */
}
:
