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; /* бул түс колдонулат */
}

Результат: