Каскад в CSS определяет, какой из конфликтующих стилей должен быть применён к элементу. Он основан на трёх основных критериях:
- Важность: Cтили с
!important имеют наивысший приоритет.
- Специфичность: Более специфичные селекторы переопределяют менее специфичные. Специфичность рассчитывается на основе количества ID, классов/псевдоклассов/селекторов атрибутов и тегов/псевдоэлементов в селекторе.
- Порядок в исходном коде: При одинаковой важности и специфичности, применяется правило, объявленное последним.
Кроме этих трёх, учитываются и другие факторы:
- Источник стиля: Стили пользователя (в настройках браузера), стили автора (внешние и внутренние стили, инлайн-стили), стили браузера по умолчанию.
- Наследование: Некоторые свойства наследуются от родительских элементов к дочерним.
Пример специфичности:
css
В этом случае, элемент с id my-id и классом my-class будет иметь красный цвет текста, так как ID #my-id имеет более высокую специфичность, чем .my-class.