Как работает специфичность CSS-селекторов?

Вопрос

Как браузер решает, какое CSS-правило применить, если их несколько?

Короткий ответ

Специфичность — это "вес" селектора. Чем он выше, тем приоритетнее правило, независимо от порядка объявления в файле (кроме равной специфичности — там побеждает последнее правило).

Подробный ответ

Специфичность считается по категориям (от старшей к младшей):

1. Инлайн-стили (style="...") — самый высокий приоритет.
2. ID-селекторы (#header).
3. Классы, атрибуты, псевдоклассы (.btn, [type=text], :hover).
4. Теги и псевдоэлементы (div, ::before).

Считать удобно как тройку (ID, class, tag): #nav .item → (1, 1, 0), что больше, чем .nav .item → (0, 2, 0).

!important перебивает обычную специфичность и должен использоваться крайне редко — он усложняет отладку, так как ломает предсказуемый каскад.

При равной специфичности побеждает правило, объявленное позже в CSS (или подключённое позже).

Пример

.card p { color: blue; }       /* (0, 1, 1) */
#article p { color: red; }     /* (1, 0, 1) — победит, т.к. есть ID */
p { color: green; }            /* (0, 0, 1) — самый низкий приоритет */

Дополнительные вопросы

• Как влияет порядок правил при равной специфичности?
• Почему !important считается антипаттерном?
• Как специфичность работает с CSS-переменными и каскадными слоями (@layer)?