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

Специфичность считается по определённым правилам и выражается числом, которое складывается из нескольких компонентов:

Inline-стили (например, style="...") имеют самый высокий приоритет.
ID-селекторы (#id) — очень специфичные.
Классы, атрибуты и псевдоклассы (.class, [type="text"], :hover) — средняя специфичность.
Теги и псевдоэлементы (div, p, ::before) — низкая специфичность.

Пример подсчёта специфичности (формат a,b,c,d):

a — inline-стили (1 или 0)
b — количество ID-селекторов
c — количество классов, атрибутов, псевдоклассов
d — количество тегов и псевдоэлементов

Например:

#menu — (0,1,0,0)
.item.active — (0,0,2,0)
div p — (0,0,0,2)

При конфликте выигрывает селектор с большей специфичностью. Если специфичность равна, то приоритет имеет правило, объявленное позже.

Inline-стили имеют специфичность (1,0,0,0) и всегда перекрывают правила из CSS.

Пример:

#header { color: red; }       /* специфичность (0,1,0,0) */
.navbar { color: blue; }       /* (0,0,1,0) */
header { color: green; }       /* (0,0,0,1) */

/* Для элемента <header id="header" class="navbar"> цвет будет красный, так как #header выше по специфичности */

Понимание специфичности помогает писать предсказуемые и управляемые стили.

Расскажи про специфичность CSS-селекторов и их приоритет