Priorytet selektorów potomków w CSS
We wszystkich poprzednich lekcjach wszystkie selektory musiały złapać sam element. Może się zdarzyć, że jeden selektor łapie element, a drugi selektor łapie rodzica tego elementu.
Wiesz już, że jeśli rodzicowi zostanie przypisany, na przykład, kolor, to kolor ten będzie dziedziczony przez potomka. Ale, jeśli potomkowi również zostanie przypisany kolor, to selektor potomka będzie miał wyższy priorytet niż selektor rodzica.
Oznacza to, że selektor znacznika potomka pokonuje klasę rodzica:
<div class="block">
<p>text</p>
</div>
.block {
color: red;
}
p {
color: green; /* zastosowany zostanie ten kolor */
}
:
Selektor znacznika potomka pokonuje również identyfikator rodzica:
<div id="block">
<p class="text">text</p>
</div>
#block {
color: red;
}
.text {
color: green; /* zastosowany zostanie ten kolor */
}
:
