CSS-de nesil saýlaýjylarynyň üstünlik tertibi

Öňki ähli sapaklarda ähli saýlaýjylar şol elementiň özüni tutmaly edi. Bir saýlaýjy elementi tutýar, beýlekisi bolsa şol elementiň ata-enesini tutýan bolup biler.

Eger ata-ene üçin, meselem, reňk bellense, şol reňk nesil tarapyndan miras alynar. Emma, eger nesile hem reňk bellense, onda nesiliň saýlaýjysy ata-enäniň saýlaýjysyndan has uly üstünlige ege bolar.

Bu, nesiliň teg saýlaýjysynyň ata-enäniň klasyny ýeňýändigini aňladýar:

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

css.block {
  color: red;
}
p {
  color: green; /* bu reňk ulanular */
}

Результат:

Nesiliň teg saýlaýjysy şeýle-de ata-enäniň identifikatoryny ýeňýär:

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

css#block {
  color: red;
}
.text {
  color: green; /* bu reňk ulanular */
}

Результат: