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

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

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

Пример:

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

Здесь первый селектор приоритетнее.

Важно: !important переопределяет все, но злоупотреблять им не стоит. Универсальный селектор (*) имеет 0.