Специфичность (specificity)
Правило, по которому браузер выбирает победивший стиль.
Сигнатура
(inline, id, class, type)Специфичность определяет, какое из конкурирующих правил применится к элементу. Браузер считает «вес» селектора по четырём уровням и сравнивает их слева направо.
| Уровень | Что считается | Пример |
|---|---|---|
| Inline | атрибут style | style="..." |
| ID | селекторы #id | #header |
| Класс | классы, атрибуты, псевдоклассы | .btn, :hover |
| Тип | теги и псевдоэлементы | p, ::before |
Чем выше уровень, тем сильнее селектор. Если специфичность одинаковая, побеждает правило, идущее в коде позже. Флаг !important перебивает обычную специфичность — его лучше избегать.
/* специфичность 0,0,1,1 */
p.intro { color: blue; }
/* специфичность 0,1,0,0 — победит этот */
#main { color: red; }