Каскад, специфичность и наследование

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

Когда на элемент претендуют несколько правил, CSS выбирает победителя по трём механизмам: каскад, специфичность и наследование.

Каскад: кто последний, тот и прав

Если два правила одинаково «весомы» и оба относятся к элементу, побеждает то, что записано ниже в коде. CSS читает стили сверху вниз, и более поздние перекрывают более ранние.

p { color: blue; }
p { color: green; }

Абзацы станут зелёными: второе правило идёт после первого и побеждает. Это и есть каскад в простейшем виде.

Специфичность: чем точнее селектор, тем он сильнее

Но порядок — не единственное, что важно. Более конкретный селектор побеждает менее конкретный, даже если стоит выше. Грубая шкала «веса» селекторов:

Тип селектора	Вес
по тегу (`p`, `div`)	самый слабый
по классу (`.note`)	средний
по id (`#main`)	сильный
inline-стиль (`style="..."`)	сильнее всех (кроме !important)

Посмотрим на конфликт. Один и тот же абзац с классом:

<p class="note">Текст</p>

p { color: black; }      /* по тегу — слабее */
.note { color: red; }    /* по классу — сильнее */

Текст станет красным: селектор по классу .note специфичнее, чем по тегу p, и побеждает несмотря на то, что стоит ниже (а здесь он ещё и ниже — сошлось вдвойне). Если бы оба были по тегу, решал бы порядок.

Наследование: некоторые свойства передаются детям

Часть свойств элемент-родитель передаёт своим потомкам автоматически. В первую очередь это свойства текста: color, font-family, font-size, line-height.

<div>
  <p>Я внутри div.</p>
  <span>И я тоже.</span>
</div>

div {
  color: purple;
  font-family: Georgia, serif;
}

И абзац, и span внутри станут фиолетовыми и шрифтом Georgia, хотя стиль задан только для div. Они унаследовали эти свойства от родителя. А вот рамки, отступы и фоны (border, margin, padding, background) не наследуются — иначе вложенные блоки получали бы кучу дублирующих рамок.

Как это работает вместе

Когда браузер решает, каким будет, например, цвет элемента, он:

собирает все правила, которые подходят элементу (свои и унаследованные);
сравнивает их специфичность — выигрывает самый конкретный;
при равной специфичности берёт то, что ниже в коде (каскад).

Практический вывод: не гонитесь за !important и длинными цепочками с id. Чаще всего хватает аккуратных классов — ими управлять проще всего, и конфликты решаются предсказуемо.

Итог

Каскад: при равной силе побеждает правило, записанное ниже.
Специфичность: id сильнее класса, класс сильнее тега; конкретное бьёт общее.
Наследование: свойства текста (color, font) передаются детям; отступы и рамки — нет.