Коротко: каскад в CSS — это правило, по которому браузер выбирает, какое из нескольких конфликтующих правил применить. Решают три вещи: происхождение и важность правила, специфичность селектора и порядок в коде. Победившее значение и становится итоговым стилем.
Четыре фактора каскада
| Фактор | Что влияет |
|---|---|
| !important | перебивает обычные правила |
| Происхождение | стили браузера, пользователя, автора |
| Специфичность | насколько «точен» селектор |
| Порядок | кто написан ниже (или подключён позже) |
Вкладки: разбор
Порядок «силы» селекторов:
- тег (
p); - класс, атрибут, псевдокласс (
.card,:hover); - идентификатор (
#header); - инлайн-стиль (
style="..."); !important.
p { color: blue; } /* слабее */
.text { color: green; } /* сильнее тега */
#main { color: red; } /* сильнее класса */При равной специфичности побеждает то правило, что написано ниже (или подключено позже).
.btn { background: red; }
.btn { background: blue; } /* победит: blue */Отсюда практическое правило: база → компоненты → страницы. Тогда «уточнения» идут позже и переопределяют общие стили.
Некоторые свойства наследуются от родителя, если у элемента не задано своё:
- наследуются:
color,font-family,font-size,line-height; - не наследуются:
margin,padding,border,background.
Управлять можно ключевыми словами: inherit (взять у родителя), initial (значение по умолчанию), unset (сбросить).
!important перебивает обычные правила, но это «ядерная кнопка»: дальше переопределить стиль ещё сложнее, и код запутывается.
.btn { color: red !important; } /* используйте в крайнем случае */Правильный путь — разобраться со специфичностью и порядком, а не «воевать» через !important.
Практика: разобрать конфликт
- Найдите элемент в DevTools.
- Посмотрите, какие правила зачёркнуты.
- Определите, какое правило победило и почему.
- Уточните свой селектор вместо
!important. - Проверьте порядок подключения файлов.
- Убедитесь, что стиль задан «на нужном» состоянии.
Частые ошибки: причина → решение
| Симптом | Причина | Решение |
|---|---|---|
| Стиль «не работает» | перебит сильнее или ниже | уточнить селектор/порядок |
| Пропал отступ у дочернего | margin не наследуется | задать свой margin |
| Текст «не меняет» цвет | задан цвет на базовом правиле выше | уточнить или понизить специфичность |
| Нужен !important | накопились конфликты | выстроить порядок и убрать |
Проверьте себя
Вопросы и ответы
Потому что правила «наслаиваются» друг на друга и итог определяется последовательным сравнением: важность, специфичность, порядок.
Источник стиля: браузерные стили по умолчанию, стили пользователя (например, из настроек доступности) и стили автора сайта. Авторские обычно сильнее браузерных.
Стили темы или инлайн-стили редактора могут иметь более высокую специфичность или подключаться позже. Проверьте в DevTools, кто победил, и увеличьте точность селектора.
В своём коде — почти всегда да. Он остаётся оправданным в редких случаях: переопределение чужого кода, утилитарные классы.
Итоги
- Каскад выбирает победителя среди конфликтующих правил.
- Факторы: важность, происхождение, специфичность, порядок.
- Наследуются не все свойства — отступы и фон нет.
- DevTools быстро показывает, почему стиль не применился.
Комментарии
Пока комментариев нет — будьте первым, кто поделится мнением.