Что такое специфичность в CSS?

Специфичность — вес селектора, по которому браузер выбирает, какое из конфликтующих правил применить к элементу.

Как считается

Тройка (id, классы/атрибуты/псевдоклассы, теги/псевдоэлементы), сравнение слева направо:

p { color: black; }           /* (0,0,1) */
.text { color: blue; }        /* (0,1,0) */
#intro { color: red; }        /* (1,0,0) — победит */
p.text:first-child { }        /* (0,2,1) */

Место в каскаде

Специфичность — не первый критерий. Сначала сравнивается важность (!important) и происхождение стилей, затем слои @layer, потом специфичность, и в конце — порядок в коде.

Практические советы

• держать специфичность низкой и одинаковой — проще переопределять;
• не стилизовать по id;
• не плодить длинные цепочки селекторов;
• :where() для стилей, которые должны легко перебиваться.

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

Специфичность — вес селектора (id, классы, теги), который решает конфликт правил после важности и слоёв, но до порядка в коде.

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