Приоритет селекторов потомков в 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; /* применится этот цвет */
}