CSS даги мерос селекторларининг приоритети

Барча олдинги дарсларда барча селекторлар элементни ўзини тутмоқ лозим эди. Балки шундай бўлиши мумкинки, бир селектор элементни тутади, вакингиси ушбу элементнинг ота-онасини тутади.

Сиз билесизки, агар ота-онага, масалан, ранг берилган бўлса, ушбу ранг мерос томонидан мерос қилиб олинади. Аммо, агар мерос хам ранг берилган бўлса, у ҳолда мерос селектори ота-она селекторига қараганда юқорироқ приоритетга эга бўлади.

Бу дегани, мерос тег селектори гиёҳ ота-онанинг синфини:

html<div class="block">
  <p>матн</p>
</div>

css.block {
  color: red;
}
p {
  color: green; /* ушбу ранг қўлланилади */
}

Результат:

Мерос тег селектори шунингдек идентификаторни гиёҳ ота-онанинг:

html<div id="block">
  <p class="text">матн</p>
</div>

css#block {
  color: red;
}
.text {
  color: green; /* ушбу ранг қўлланилади */
}

Результат: