Как формируется приоритет CSS-правил?

CSS расшифровывается как Cascading Style Sheets, и каскад — ключевая идея.

Определение

Определение: Каскад CSS — механизм, по которому браузер выбирает одно итоговое правило из нескольких подходящих.

Основные факторы приоритета

Браузер применяет правила в следующем логическом порядке:

1) Важность

• !important перекрывает обычные правила.

• inline-стили с !important почти всегда выигрывают.

2) Специфичность селектора

Специфичность определяется “весом” селектора:

• inline-стили → самый высокий приоритет

• #id

• .class, [attr], :pseudo-class

• tag, ::pseudo-element

Пример:

#app .button { color: red; }
.button { color: blue; }

Будет применён red.

3) Порядок объявления

Если селекторы одинаковые по специфичности:

• правило, объявленное позже, имеет приоритет

.button { color: red; }
.button { color: blue; } /* применится это */

4) Наследование (отдельно)

Некоторые свойства наследуются (color, font), но наследование не побеждает явные правила.

Вывод: приоритет CSS-правил определяется важностью, затем специфичностью селектора и только потом порядком объявления. Понимание этого избавляет от “магического” использования !important.