Что такое каскадирование в CSS?

Каскадирование (Cascading) — это механизм CSS, который определяет, какие стилевые правила применяются к элементу, когда несколько правил могут на него влиять. Решение принимается на основе трёх ключевых факторов: порядка, специфичности и важности.

Основные принципы:

1. Порядок источников и объявлений: Позднее объявленное правило (ниже в коде) имеет приоритет. Стили из таблицы пользователя (браузера) имеют низший приоритет, авторские (ваши) — средний, а !important в авторских — высший.
2. Специфичность селектора: Каждому селектору присваивается вес. Более специфичный селектор переопределяет менее специфичный.
   • Вес: инлайн-стиль (1000) > ID (100) > класс/псевдокласс/атрибут (10) > тег/псевдоэлемент (1).
3. Директива !important: Объявление с !important имеет наивысший приоритет, но её чрезмерное использование нарушает естественный каскад и усложняет поддержку кода.

Пример на практике:

<p id="unique" class="text">Пример текста</p>

/* Специфичность: 1 (тег) */
p { color: blue; }
/* Специфичность: 10 (класс). Победит, т.к. 10 > 1 */
.text { color: red; }
/* Специфичность: 100 (ID). Победит, т.к. 100 > 10 */
#unique { color: green; }
/* Принудительный высший приоритет благодаря !important */
p { color: yellow !important; } /* Этот цвет и будет применён */

Каскадирование — фундаментальный принцип CSS, позволяющий эффективно управлять стилями и их переопределениями.