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

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

Каждый селектор имеет свой балл специфичности. Более высокий балл означает более высокую приоритетность.

Расчет специфичности базируется на количестве следующих компонентов в селекторе (по убыванию значимости):

• Сотни (1000): Правила с !important (имеют наивысший приоритет, но их использование не рекомендуется).
• Сотни (100): Инлайновые стили (записанные непосредственно в атрибуте style HTML-тега).
• Сотни (100): Идентификаторы (селекторы по id, например #my-element).
• Десятки (10): Классы (селекторы по.class), псевдоклассы (например :hover, :focus), атрибуты (например [type="text"]).
• Единицы (1): Типы элементов (названия HTML-тегов, например div, p), псевдоэлементы (например ::before, ::after).
• Ноль (0): Универсальный селектор (*), комбинаторы (> , +, ~), селектор родителя (:not(), :is(), :where() не добавляют специфичности сами по себе, но могут влиять на специфичность внутри скобок).

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

• p { ... } - Специфичность: 0-0-0-1
• .my-class { ... } - Специфичность: 0-0-1-0
• #my-id { ... } - Специфичность: 0-1-0-0
• div.my-class { ... } - Специфичность: 0-0-1-1
• ul > li.item[data-id="1"] { ... } - Специфичность: 0-0-2-2 (li, ul = 2; .item, [data-id="1"] = 2)

Если два правила имеют одинаковую специфичность, применяется правило, которое расположено ниже в CSS-файле.

Пример:

/* Файл style.css */
.my-element {
  color: blue; /* Специфичность: 0-0-1-0 */
}

#element-id {
  color: red; /* Специфичность: 0-1-0-0 */
}

.my-element {
  font-weight: bold; /* Специфичность: 0-0-1-0, переопределяет предыдущее правило с такой же специфичностью */
}

В этом случае текст элемента с id element-id будет красным, а текст элемента с классом my-element будет синим и жирным (синий перебивается красным для элемента с обоими селекторами из-за более высокой специфичности #element-id).

Понимание специфичности важно для написания предсказуемого и легко поддерживаемого CSS. Избегайте чрезмерно сложной специфичности и использования !important для лучшей управляемости стилями.