Что такое специфичность в CSS

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

Правила расчета:

1. Инлайн-стили (style="...") — 1000.
2. ID (#id) — 100.
3. Классы, атрибуты, псевдоклассы (.class, [type="text"], :hover) — 10.
4. Теги и псевдоэлементы (div, ::before) — 1.
5. Универсальный селектор (*) и наследование — 0.

Пример:

#header .menu li.active { /* 100 + 10 + 1 + 10 = 121 */ }
div#main .item:hover { /* 1 + 100 + 10 + 10 = 121 */ }

Если специфичность равна, побеждает последнее правило в коде. !important переопределяет все, но злоупотреблять им не стоит.