При конфликте правил побеждает: !important → более высокая специфичность → более позднее правило. Специфичность считается тройкой (id, классы/атрибуты/псевдоклассы, теги/псевдоэлементы): #nav .item a = (1, 1, 1). Инлайн-стиль сильнее любых селекторов.
А ещё Каскадные слои @layer задают приоритет независимо от специфичности
Так подсказку видит пользователь sotto на живом собеседовании — за пару секунд, пока вы думаете вслух.
Порядок каскада (упрощённо): происхождение и важность (стили браузера, автора, !important), слои @layer, специфичность, порядок в коде.
Примеры специфичности:
| селектор | специфичность |
|---|---|
p | (0, 0, 1) |
.btn | (0, 1, 0) |
nav .btn:hover | (0, 2, 1) |
#header .btn | (1, 1, 0) |
style="..." | сильнее любого селектора |
Наследование — отдельный механизм: color, font наследуются от родителя, margin и border — нет; наследованное значение слабее любого правила, нацеленного на сам элемент.
Практика: держать специфичность низкой и ровной (методология БЭМ — один класс на элемент, CSS Modules, утилитарные классы); id для стилей не использовать.
sotto слышит вопрос интервьюера и показывает короткий ответ и план, как в блоке «Коротко». Оставьте контакт — пришлём доступ и промокод.
sotto