A CSS leszármazott szelektorok prioritása
Az összes előző leckében minden szelektor magát az elemet kellett, hogy kiválassza. Előfordulhat, hogy az egyik szelektor egy elemet választ ki, a másik szelektor pedig annak az elemnek a szülőjét.
Már tudod, hogy ha a szülőnek meg van adva, például egy szín, akkor ez a szín öröklődik a leszármazottra. De ha a leszármazottnak is meg van adva szín, akkor a leszármazott szelektorának nagyobb lesz a prioritása, mint a szülő szelektorának.
Ez azt jelenti, hogy a leszármazott tag szelektorja felülírja a szülő osztályát:
<div class="block">
<p>szöveg</p>
</div>
.block {
color: red;
}
p {
color: green; /* ez a szín fog érvényesülni */
}
:
A leszármazott tag szelektorja szintén felülírja a szülő azonosítóját:
<div id="block">
<p class="text">szöveg</p>
</div>
#block {
color: red;
}
.text {
color: green; /* ez a szín fog érvényesülni */
}
:
