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

Специфичность считается как три числа (A, B, C) и сравнивается слева направо.

Как считать

• A — количество id: #header.
• B — классы, атрибуты и псевдоклассы: .btn, [type="text"], :hover.
• C — теги и псевдоэлементы: div, ::before.

#nav .item a:hover   /* (1, 2, 1) */
.list > li           /* (0, 1, 1) */
a::before            /* (0, 0, 2) */

Сравнение идёт по разрядам: (1, 0, 0) сильнее (0, 20, 0).

Особые случаи

• * и комбинаторы (>, +, ~, пробел) не добавляют специфичности.
• :is(), :not(), :has() берут специфичность самого сильного аргумента.
• :where() — всегда (0, 0, 0).
• Инлайн-стиль сильнее любых селекторов, !important — сильнее инлайна.
• При равной специфичности побеждает правило, объявленное позже.

Коротко для собеседования

Специфичность — (id, классы/атрибуты/псевдоклассы, теги/псевдоэлементы), сравнивается слева направо; :where() обнуляет, :is() берёт максимум аргументов.

Подробнее: MDN — Специфичность