Как работает алгоритм специфичности в CSS

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

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

Пример:

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

Важно:

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