Какой стиль будет применён, если два правила имеют одинаковый селектор?

Question

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

YeaHub · Accepted Answer

Когда селекторы полностью совпадают, браузеру нужно простое правило выбора.ОпределениеОпределение: Одинаковый селектор — это ситуация, когда два CSS-правила имеют одинаковую специфичность и применяются к одному и тому же элементу.Как браузер принимает решениеВ этом случае учитывается только порядок объявления:Браузер читает CSS сверху вниз.Все подходящие правила попадают в “кандидаты”.При равной специфичности побеждает правило, объявленное позже.Пример.card { background: white; } .card { background: gray; } Будет применён background: gray.Влияние порядка файлов Если в обоих файлах есть .button, стиль из theme.css перекроет стиль из base.css.Практическое значениепорядок подключения CSS — это часть логики приложениядублирование селекторов усложняет поддержкулучше явно усиливать селектор, а не надеяться на порядокВывод: при одинаковых селекторах и специфичности применяется правило, объявленное последним.