Как вычисляется CSS Specificity

Специфичность (Specificity) в CSS определяет, какие стили будут применены к элементу при конфликте правил. Рассчитывается по весам:

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

Пример:

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

Важно:

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