Приоритет селекторов CSS

Пусть у нас есть следующий код:

p {
	color: red;
}
p {
	color: green;
}

Как вы видите, сначала абзацам задается красный цвет, а потом ниже - зеленый. В этом случае вторая запись переопределит первую и абзацы станут зеленого цвета.

Расскажите, какого размера будут заголовки после выполнения следующего кода:

<h2>text</h2>

h2 {
	font-size: 20px;
}
h2 {
	font-size: 30px;
}

Замечание

Описанное относится только к конфликту свойств. То есть к случаю, когда и в одном селекторе, и во втором есть одинаковые свойства. Если свойства разные, то просто применятся свойства и одного, и второго селектора.

Расскажите, какие свойства применятся к заголовкам и какие будут значения этих свойств:

<h2>text</h2>

h2 {
	font-size: 20px;
	color: blue;
}
h2 {
	font-style: italic;
	color: red;
}

Правила специфичности

В предыдущем примере оба селектора были одинаковыми и имели одинаковый приоритет. Это значит, что побеждало то свойство, которое было написано ниже.

Бывают также ситуации, когда одному элементу страницы соответствуют несколько селекторов. В этом случае при конфликте свойств победит более специфичный, то есть более точный селектор. Давайте рассмотрим правила специфичности.

Правило первое

Класс всегда побеждает селектор тега:

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

p {
	color: red;
}
.text {
	color: green; /* применится этот цвет */
}

Правило второе

Идентификатор всегда побеждает класс:

<p id="elem" class="text">text</p>

.text {
	color: red;
}
#elem {
	color: green; /* применится этот цвет */
}

Правило третье

При равных условиях побеждает тот селектор, у которого больше частей. Например, если у нас два селектора тегов, то победит тот, у которого тегов больше:

<div>
	<p>text</p>
</div>

p {
	color: red;
}
div p {
	color: green; /* применится этот цвет */
}

Если два селектора классов, то победит тот, в котором указано больше классов (если там будут селекторы тегов, то они не влияют):

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

.text {
	color: red;
}
.block .text {
	color: green; /* применится этот цвет */
}

Родители

Во всех предыдущих примерах все селекторы должны ловить сам элемент. Может быть такое, что один селектор ловит элемент, а второй селектор ловит родителя этого элемента.

Вы уже знаете, что если родителю задан, например, цвет, то этот цвет будет наследоваться потомком. Но, если потомку также задан цвет, то селектор потомка будет иметь больший приоритет, чем селектор родителя.

Это значит, что селектор тега потомка побеждает класс родителя:

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