Что такое специфичность (specificity) селекторов?

Специфичность — это механизм, определяющий приоритет CSS-правил при конфликте нескольких правил, применённых к одному элементу. Чем выше специфичность селектора, тем выше приоритет его стилей.

Аналогия из жизни: специфичность — как военные звания. Приказ генерала (id) перевешивает приказ полковника (class), а тот — приказ рядового (тег). Если звания равны, выполняется последний по времени приказ.

Расчёт специфичности

Специфичность записывается как четыре числа (a, b, c, d):

Уровень	Что считаем	Пример	Вес
a	Inline-стили (style="")	style="color:red"	1,0,0,0
b	Идентификаторы (#id)	#header	0,1,0,0
c	Классы, псевдоклассы, атрибуты	.nav, :hover, [type]	0,0,1,0
d	Элементы, псевдоэлементы	div, ::before	0,0,0,1

Примеры

Селектор	Специфичность	Итог
p	0,0,0,1	1
.intro	0,0,1,0	10
p.intro	0,0,1,1	11
#main	0,1,0,0	100
#main .intro p	0,1,1,1	111
style="..."	1,0,0,0	1000

Правила разрешения конфликтов

1. Сравнивается специфичность — побеждает более специфичный селектор
2. При равной специфичности — побеждает последнее правило в коде
3. !important перебивает любую специфичность (но использовать его — плохая практика)

На собеседовании: интервьюер часто даёт два конфликтующих правила и просит определить, какое сработает. Нужно уметь рассчитать специфичность. Частая ошибка — забыть, что при равной специфичности побеждает последнее правило.