Ответ
Название «каскадные» (Cascading Style Sheets) отражает ключевой механизм применения стилей: правила накладываются друг на друга и комбинируются в строго определенном порядке приоритета.
Каскад определяется тремя основными факторами:
- Источник стиля: Приоритет имеет порядок: стили автора (ваши CSS) > стили пользователя > стили браузера по умолчанию.
- Специфичность селектора: Правила вычисляются по «весу» селектора. Порядок приоритета (от высшего):
!important(не рекомендуется для злоупотребления)- Инлайн-стили (
style="...") - ID (
#id) - Классы, псевдоклассы, атрибуты (
.class,:hover) - Элементы, псевдоэлементы (
div,::before)
- Порядок объявления: При равной специфичности побеждает правило, объявленное позже.
Пример каскада:
/* [Источник: авторский, Специфичность: 0,0,1 (элемент)] */
p { color: black; }
/* [Источник: авторский, Специфичность: 0,1,0 (класс)] - ВЫИГРЫВАЕТ */
.text { color: blue; }
/* [Источник: авторский, Специфичность: 0,0,1] - Игнорируется,
т.к. специфичность равна первому правилу, но объявлено раньше */
p { color: red; }Эти правила последовательно (каскадом) определяют итоговый стиль элемента.