Почему последнее объявленное CSS-правило может перезаписывать предыдущее?

Поведение CSS основано на строгих правилах каскада.

Определение

CSS cascade — это механизм, определяющий, какое из нескольких правил будет применено к элементу.

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

Браузер учитывает:

• важность (!important)

• специфичность селектора

• порядок объявления

Роль порядка

Если:

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

• нет !important

то применяется правило, объявленное последним в CSS.

Практический пример

.button {
  color: blue;
}

.button {
  color: red;
}

В итоге цвет будет красным.

Частые источники проблем

Конфликты возникают из-за:

• дублирующихся селекторов

• неправильного порядка подключения файлов

• глобальных стилей

Краткий вывод

Последнее объявленное CSS-правило выигрывает при равной специфичности, что является основой работы каскада.