Что такое специфичность селекторов?

Специфичность селекторов (specificity) — это правило CSS, определяющее, какой стиль применится к элементу, когда его затрагивают несколько конфликтующих правил.

Как считается

Специфичность — это условный «вес», сравниваемый по группам (a, b, c):

• a — инлайн-стили (style="") — наивысший вес.
• b — ID-селекторы (#id).
• c — классы, атрибуты, псевдоклассы (.class, [type], :hover).
• d — теги и псевдоэлементы (div, ::before).

Сравнение идёт по разрядам слева направо: сначала ID, потом классы, потом теги.

#header .nav a { }   /* 1 id, 1 class, 1 tag → (1,1,1) */
.nav a { }           /* 0 id, 1 class, 1 tag → (0,1,1) */
/* победит первое правило */

Особые случаи

• `!important` — переопределяет обычную специфичность (использовать осторожно).
• Универсальный селектор `** и комбинаторы (>, +`) не добавляют специфичности.
• При равной специфичности побеждает последнее правило в источнике.

Практика

• Избегать !important и лишних ID в селекторах.
• Держать специфичность низкой и плоской (методологии BEM, утилитарный CSS).

Коротко для собеседования

Специфичность решает конфликты CSS-правил по весу: инлайн > ID > класс/атрибут/псевдокласс > тег. При равенстве — последнее правило. !important перебивает всё. Низкая специфичность упрощает поддержку стилей.