Прыярытэт селектараў нашчадкаў у CSS

Ва ўсіх папярэдніх уроках усе селектары павінны былі лавіць сам элемент. Можа быць такое, што адзін селектар ловіць элемент, а другі селектар ловіць бацьку гэтага элемента.

Вы ўжо ведаеце, што калі бацьку зададзены, напрыклад, колер, то гэты колер будзе насідавацца нашчадкам. Але, калі нашчадку таксама зададзены колер, то селектар нашчадка будзе мець большы прыярытэт, чым селектар бацькі.

Гэта значыць, што селектар тэгу нашчадка перамагае клас бацькі:

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

.block {
	color: red;
}
p {
	color: green; /* прымяніцца гэты колер */
}

Селектар тэгу нашчадка таксама перамагае ідэнтыфікатар бацькі:

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

#block {
	color: red;
}
.text {
	color: green; /* прымяніцца гэты колер */
}