Урок 12. Справочник: Каскад, наследование и специфичность
⚡ Кратко
Специфичность = четыре разряда (inline, id, class, tag). Сравнение слева направо, разряды не переносятся. Запоминайте не синтаксис, а вес каждого селектора.
Шкала специфичности
Разряды читаются как «версия»: сначала сравнивается inline, затем id, затем class, затем tag.
| Селектор | (inline, id, class, tag) | Зачем нужен |
|---|---|---|
* | (0,0,0,0) | Универсальный — специфичности не добавляет. |
p | (0,0,0,1) | Селектор по тегу — самый слабый именованный. |
.text | (0,0,1,0) | Класс — основной рабочий инструмент, держите специфичность на этом уровне. |
:hover, :first-child | (0,0,1,0) | Псевдокласс считается как класс. |
.card p | (0,0,1,1) | Класс + тег: сумма разрядов. |
.card .text | (0,0,2,0) | Два класса — сильнее одного, но всё ещё слабее id. |
#lead | (0,1,0,0) | Id — сильнее любого числа классов. |
style="…" | (1,0,0,0) | Inline — сильнее любого id. |
… !important | вне шкалы | Перебивает обычную специфичность. На базовом уровне избегать. |
Управление наследованием
| Значение | Что делает |
|---|---|
inherit | Явно наследует значение от родителя (даже для ненаследуемых свойств). |
initial | Возвращает свойству начальное значение по спецификации. |
unset | Для наследуемых свойств = inherit, для остальных = initial. |
Запомнить: наследуются текстовые свойства (
color, font-family, font-size, line-height); размеры и рамки (margin, padding, border, width) — нет.