Что такое каскад (cascade) в CSS?

Каскад (Cascade) в CSS — это алгоритм, который определяет, какое окончательное значение CSS-свойства будет применено к элементу, когда на него влияют несколько конфликтующих правил из разных источников (авторские стили, пользовательские стили, стили браузера).

Алгоритм разрешения конфликтов (в порядке приоритета):

1. Важность (!important): Правила с !important имеют наивысший приоритет.
2. Источник и происхождение: Порядок приоритета: !important в user-agent < авторские < !important авторские < !important пользовательские.
3. Специфичность селектора: Вычисляется вес селектора. Порядок (от низкого к высокому):
   • Селекторы элементов (p) и псевдоэлементов (::before).
   • Селекторы классов (.class), атрибутов ([type]) и псевдоклассов (:hover).
   • Селекторы ID (#id).
   • Встроенные стили (style="").
4. Порядок следования: Если все предыдущие критерии равны, применяется правило, объявленное последним в коде.

Пример расчета специфичности:

/* Специфичность: (0,0,1) - 1 элемент */
p { color: black; }

/* Специфичность: (0,1,0) - 1 класс */
.text { color: blue; }

/* Специфичность: (1,0,0) - 1 ID (ВЫСОЧАЙШИЙ ПРИОРИТЕТ здесь) */
#main { color: red; }

/* Специфичность: (0,1,1) - 1 класс + 1 элемент */
p.text { color: green; }

/* !important перебивает даже высокую специфичность */
.text { color: orange !important; }

Для элемента <p id="main" class="text"> цвет будет orange из-за !important.