Каскад - это то, что делает CSS-таблицы стилей настолько полезными. Короче говоря, каскад определяет порядок приоритета для того, как применять противоречивые стили. Другими словами, если у вас есть два стиля:
p {цвет: красный; }p {цвет: синий; }
Каскад определяет, какой цвет должен содержать абзацы, хотя в таблице стилей указано, что они должны быть красными и синими. В конечном итоге только один цвет может применяться к параграфам, поэтому должен быть заказ. И этот порядок применяется с помощью селекторов ( п в приведенном выше примере) имеют наивысший приоритет и какой порядок они появляются в документе.
Следующий список - это упрощение того, как ваш браузер определяет приоритет для стиля:
- Посмотрите в таблице стилей для селектора, соответствующего элементу. Если нет определенных стилей, используйте правила по умолчанию в браузере
- Посмотрите таблицу стилей для отметок, отмеченных
!важныйи применять их к соответствующим элементам. - Все стили в таблице стилей переопределяют стили браузера по умолчанию (за исключением таблиц стилей пользователя).
- Чем более конкретным является стиль, тем выше приоритет. Например,
div> p.classболее конкретно, чемp.classчто более конкретно, чемп. - Наконец, если два правила применяются к одному и тому же элементу и имеют тот же приоритет выбора, тот, который был загружен прошлой будут применены. Другими словами, таблица стилей читается сверху вниз, а стили применяются друг над другом.
Исходя из этих правил, в приведенном выше примере абзацы будут написаны синим цветом, потому что p {цвет: синий; } приходит в таблице стилей.
Это очень упрощенное объяснение каскада. Если вам интересно узнать больше о том, как работает каскад, вы должны прочитать «Что означает« Каскад »в каскадных таблицах стилей ?.
