Как работает каскад в CSS и в каком порядке браузер выбирает победившее правило?

Каскад — алгоритм, который решает, какое значение свойства применить, когда правил несколько.

Порядок приоритета

1. Происхождение и важность: !important в авторских стилях побеждает обычные, пользовательские и браузерные стили идут по своим правилам.
2. Слои (@layer): стили из более позднего слоя сильнее, а для !important порядок слоёв обратный.
3. Специфичность селектора: inline-стиль, затем id, затем классы, атрибуты и псевдоклассы, затем теги и псевдоэлементы.
4. Порядок в коде: при равенстве выигрывает правило, написанное позже.

@layer base, components;

@layer base { a { color: gray; } }
@layer components { .link { color: blue; } }

p { color: black; }
p.note { color: red; }   /* специфичнее */
p.note { color: green; } /* равная специфичность, позже в файле */

Советы

• Держите специфичность низкой: классы, а не вложенные селекторы и id.
• Избегайте !important, кроме утилит и сброса.
• Для порядка между библиотекой и своим кодом используйте @layer.

Если стиль «не применяется», откройте DevTools и посмотрите, какое правило перечёркнуто и почему.

Коротко для собеседования

Каскад выбирает правило по важности и происхождению, слою, специфичности и порядку в коде. Если стиль не применяется, DevTools покажет, какое правило перечёркнуто и почему.