CSS-i pärijate selektorite prioriteet

Kõigis eelmistes õppetundides kõik selektorid pidid püüdma elementi ennast. Võib juhtuda, et üks selektor püüab elemendi ja teine selektor püüab selle elemendi vanema.

Te juba teate, et kui vanemale on määratud, näiteks, värv, siis see värv päritakse järeltulijalt. Kuid kui järeltulijale on samuti määratud värv, siis on järeltulija selektoril suurem prioriteet kui vanema selektoril.

See tähendab, et järeltulija tunnuse selektor võidab vanema klassi:

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

css.block {
  color: red;
}
p {
  color: green; /* rakendub see värv */
}

Результат:

Järeltulija tunnuse selektor võidab samuti vanema identifikaatori:

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

css#block {
  color: red;
}
.text {
  color: green; /* rakendub see värv */
}

Результат: