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:

html<div class="block">
  <p>szöveg</p>
</div>

css.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:

html<div id="block">
  <p class="text">szöveg</p>
</div>

css#block {
  color: red;
}
.text {
  color: green; /* ez a szín fog érvényesülni */
}

Результат: