Ответ
Каскад (Cascade) в CSS — это алгоритм, который определяет, какое окончательное значение CSS-свойства будет применено к элементу, когда на него влияют несколько конфликтующих правил из разных источников (авторские стили, пользовательские стили, стили браузера).
Алгоритм разрешения конфликтов (в порядке приоритета):
- Важность (
!important): Правила с!importantимеют наивысший приоритет. - Источник и происхождение: Порядок приоритета:
!importantв user-agent < авторские <!importantавторские <!importantпользовательские. - Специфичность селектора: Вычисляется вес селектора. Порядок (от низкого к высокому):
- Селекторы элементов (
p) и псевдоэлементов (::before). - Селекторы классов (
.class), атрибутов ([type]) и псевдоклассов (:hover). - Селекторы ID (
#id). - Встроенные стили (
style="").
- Селекторы элементов (
- Порядок следования: Если все предыдущие критерии равны, применяется правило, объявленное последним в коде.
Пример расчета специфичности:
/* Специфичность: (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.
Ответ 18+ 🔞
А, слушай, про каскад в CSS! Ну это ж, блядь, святая святых, основа основ, а половина верстальщиков про неё нихуя не помнит, пока в проекте не начнётся пиздец и стили не поползут как угорелые.
Короче, представь: на один бедный, ёбта, div сваливается куча правил — от браузера, от тебя, от какого-нибудь плагина. И все орут: «Сделай меня синим!», «Нет, красным, сука!», «А я сказал — зелёным!». Так вот каскад — это такой, блядь, верховный судья, который всех этих крикунов слушает по очереди и выносит окончательный, блядь, приговор — какого цвета будет этот самый div.
И судится он так, хитрая жопа:
-
Сначала смотрят на кричащих истеричек. Это те, кто написал
!important. У них приоритет овердохуища. Но и тут, ёпта, есть нюанс —!importantот самого браузера слабее, чем твой!important, а твой слабее, чем!important, который в спец. расширении для слепых у пользователя. В общем, бардак. -
Потом смотрят, кто вообще пришёл. Откуда правило: от браузера (user agent), от тебя (автор) или от юзера? Обычно твои стили бьют стили браузера. Но если юзер в своих настройках написал
!important— пиши пропало, его слово закон, хоть ты тресни. -
А вот если все без
!importantили оно одинаковое — начинается самое весёлое: считают «жирность» селектора, его специфичность. Это как взвешивание перед боем, блядь.- Лёгкий вес (0,0,1): Селекторы по тегу (
p) и псевдоэлементы (::before). Ну, просто имя, нихуя. - Средний вес (0,1,0): Классы (
.my-class), псевдоклассы (:hover), селекторы по атрибуту ([type="text"]). Уже солиднее. - Тяжёлый вес (1,0,0): ID (
#header). Вот это уже серьёзная заявка, один такой жирдяй перевесит кучу классов. - Абсолютный чемпион: Встроенный стиль прямо в теге (
style="color: red;"). У него вес, блядь, (1,0,0,0) — почти как ID, но ещё круче.
- Лёгкий вес (0,0,1): Селекторы по тегу (
-
Ну и если после всех этих танцев с бубнами два правила оказались одинаково жирными — побеждает то, которое написано в коде ПОСЛЕДНИМ. Принцип «кто последний, тот и прав». Обычно на этом все и спотыкаются, когда подключают свои стили не в том порядке.
Вот, смотри пример, чтобы не быть просто пиздаболом:
/* Специфичность: (0,0,1) - один тощий тег. Цвет чёрный. */
p { color: black; }
/* Специфичность: (0,1,0) - один упитанный класс. Цвет синий. */
.text { color: blue; }
/* Специфичность: (1,0,0) - один жирный ID. Цвет красный. */
#main { color: red; }
/* Специфичность: (0,1,1) - класс + тег. Цвет зелёный. */
p.text { color: green; }
/* А тут, блядь, истеричка с !important. Всем пизда, цвет оранжевый! */
.text { color: orange !important; }Вот есть у нас <p id="main" class="text">. Все на него смотрят. ID говорит «красный!», связка p.text орёт «зелёный!». Но в конце приплывает второй .text с криком !important — и всем, блядь, каюк. Элемент будет оранжевым, хоть ты обосрись. Вот такая, сука, каскадная демократия.