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

Question

Приоритет CSS-правил формируется на основе каскада: важности (!important), специфичности селектора и порядка объявления. Если важность одинаковая, браузер сравнивает специфичность селекторов. Если и она равна, выигрывает правило, объявленное позже. Эти правила позволяют браузеру однозначно определить итоговый стиль.

YeaHub · Accepted Answer

CSS расшифровывается как Cascading Style Sheets, и каскад — ключевая идея.ОпределениеОпределение: Каскад CSS — механизм, по которому браузер выбирает одно итоговое правило из нескольких подходящих.Основные факторы приоритетаБраузер применяет правила в следующем логическом порядке:1) Важность!important перекрывает обычные правила.inline-стили с !important почти всегда выигрывают.2) Специфичность селектораСпецифичность определяется “весом” селектора:inline-стили → самый высокий приоритет#id.class, [attr], :pseudo-classtag, ::pseudo-elementПример:#app .button { color: red; }
.button { color: blue; }
Будет применён red.3) Порядок объявленияЕсли селекторы одинаковые по специфичности:правило, объявленное позже, имеет приоритет.button { color: red; }
.button { color: blue; } /* применится это */
4) Наследование (отдельно)Некоторые свойства наследуются (color, font), но наследование не побеждает явные правила.Вывод: приоритет CSS-правил определяется важностью, затем специфичностью селектора и только потом порядком объявления. Понимание этого избавляет от “магического” использования !important.