Урок 12. Примеры: Каскад, наследование и специфичность

Рабочие примеры

В каждом примере на один элемент спорят несколько правил. Сверху — реальный результат, снизу — код. Победитель помечен в комментарии.

1. Тег vs класс: класс сильнее

Элемент <p class="text"> подходит и под p, и под .text. Специфичность: p = (0,0,0,1), .text = (0,0,1,0). Класс старше тега — побеждает синий.

p      { color: gray; }    /* (0,0,0,1) */
.text  { color: #2563eb; } /* (0,0,1,0) ← побеждает */

2. Класс vs id: id сильнее

Тот же абзац теперь несёт и класс, и id: <p class="text" id="lead">. .text = (0,0,1,0), #lead = (0,1,0,0). Id старше класса — побеждает оранжевый.

.text  { color: #2563eb; } /* (0,0,1,0) */
#lead  { color: #ea580c; } /* (0,1,0,0) ← побеждает */

3. Inline побеждает всё (кроме !important)

Атрибут style прямо на элементе имеет специфичность (1,0,0,0) — старше любого id. Поэтому зелёный цвет из style перебивает и #lead, и .text.

<!-- inline = (1,0,0,0), сильнее #lead и .text -->
<p id="lead" class="text" style="color:#15803d">…</p>

4. Порядок решает при равной специфичности

Два правила .button имеют одинаковую специфичность (0,0,1,0). Спор решает порядок: побеждает то, что написано ниже — фон бирюзовый.

.button { background: #e5e7eb; } /* (0,0,1,0) */
.button { background: #0f766e; } /* (0,0,1,0) ← ниже, побеждает */

5. !important перебивает специфичность

Слабое правило по тегу p с !important побеждает даже id без !important. Так делать на базовом уровне не нужно — пример показывает силу флага, а не рекомендацию.

#lead { color: #ea580c; }          /* (0,1,0,0) */
p     { color: #b91c1c !important; } /* !important ← побеждает */

6. Наследование: цвет течёт от родителя к детям

Зададим color и font-family на контейнере — вложенные абзацы унаследуют их. А вот border родителя детям не передаётся (он не наследуется).

.article {
  color: #0f766e;            /* наследуется */
  font-family: Georgia, serif; /* наследуется */
  border: 2px solid #0f766e;   /* НЕ наследуется детьми */
}