Это один из краеугольных камней CSS. Когда начинающие изучают CSS, часто возникает вопрос: «Почему один стиль работает, а другой — нет?».

Ответ почти всегда связан с двумя понятиями:

• Специфичность (Приоритетность или вес селекторов / Specificity)
• Каскадность (Cascade)

Разберём их простым языком.

1. Что такое специфичность?

Это математическая формула, которая вычисляет, какое правило важнее. Браузер присваивает вес (Specificity) каждому селектору и суммирует его.

Формула веса (4 уровня):

2. Что такое каскадность?

Слово каскад означает, что браузер последовательно просматривает все CSS-правила и решает, какое из них применить.

Пример:

h1 { color: red; }   /* Вес: 1 */
h1 { color: blue; }  /* Вес: 1 — одинаковый! */

В приоритете будет blue, так как это правило находится ниже в коде, т.е. объявлено последним.

3. important — исключение из правил

Это «ядерная кнопка» или ещё один способ «сломать правила». Оно игнорирует и каскад, и специфичность.

h1 { color: red !important; }
#main h1 { color: blue; } /* Более специфичный, но не будет в приоритете */

Правила работы !important:

• Если есть два правила с !important, между ними снова начинают работать вес и каскад (сравнивается специфичность, затем порядок).
• Не нужно использовать !important, кроме как для переопределения сторонних библиотек (например, jQuery UI) или для utility-классов (вроде .hidden { display: none !important; }).

4. Итог

Запомните три главных правила:

• Каскадность — если вес одинаковый, побеждает правило, которое написано позже.
• Вес селектора — чем точнее селектор, тем выше его приоритет.
• !important — имеет самый высокий приоритет, но использовать его следует только в исключительных случаях.

Если вы поймёте эти три принципа, большинство вопросов из серии «Почему мой CSS не работает?» исчезнут.