Специфичность определяет приоритет CSS-правил при их конфликте, когда к одному элементу применяются разные стили. Она вычисляется для каждого селектора в правиле.

Специфичность — это числовая оценка, состоящая из четырех категорий (A, B, C, D), записываемая как 0,0,0,0. Чем больше число, тем выше специфичность.

Категории:

A (in-line style): Стили, заданные атрибутом style в HTML-элементе. Имеют наивысшую специфичность (например, 1,0,0,0).
B (ID): Селекторы по ID (например, #my-id). Увеличивают вторую цифру (например, 0,1,0,0).
C (Class, Attribute, Pseudo-class): Селекторы по классу (например, .my-class), атрибуту (например, [type="text"]), псевдоклассу (например, :hover, :first-child). Увеличивают третью цифру (например, 0,0,1,0).
D (Element, Pseudo-element): Селекторы по тегу HTML-элемента (например, div, p) и псевдоэлементам (например, ::before, ::after). Увеличивают четвертую цифру (например, 0,0,0,1).

Пример расчета:

p - 0,0,0,1
.my-class - 0,0,1,0
#my-id - 0,1,0,0
div p - 0,0,0,2 (сумма специфичностей двух тегов)
#my-id .my- Аclass - 0,1,1,0 (сумма специфичности ID и класса)
div#my-id.my-class:hover - 0,1,2,1 (сумма специфичности тега, ID, класса и псевдокласса)

Правила:

Специфичность in-line style всегда выше любой комбинации других селекторов, кроме правил с флагом !important.
Правила с флагом !important имеют наивысший приоритет, переопределяя даже in-line style. Использование !important не рекомендуется из-за сложности отладки.
При одинаковой специфичности применяется правило, объявленное последним в CSS-файле.
Селектор универсальный (*) и псевдокласс :where() имеют специфичность 0,0,0,0 и не увеличивают общую специфичность.

css

Что ты знаешь о специфичности CSS-селекторов?