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