Как повысить приоритет CSS Selector?

Повысить приоритет CSS-правила можно через специфичность, порядок, слои каскада или `!important`.

Способы от лучшего к худшему

1. Порядок — при равной специфичности побеждает правило ниже. Иногда достаточно перенести правило.
2. Слои — стили в более позднем слое @layer побеждают стили из раннего независимо от специфичности:

@layer base, components;
@layer components { .button { color: white; } }

1. Специфичность — добавить класс, атрибут или повторить класс: .card .button, .button.button.
2. Инлайн-стиль — style="…" сильнее селекторов.
3. `!important` — перебивает всё, кроме другого !important с большей специфичностью или из более важного источника.

Почему !important — последний вариант

Его можно перебить только другим !important, и стили быстро превращаются в «войну важностей». Уместен в утилитах (.hidden { display: none !important }) и при переопределении чужих инлайн-стилей.

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

Порядок и @layer — лучшие способы, затем специфичность; инлайн-стили и !important — крайние меры.

Подробнее: MDN — Каскад