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

Специфичность определяет приоритет 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, класса и псевдокласса)

Правила:

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

/*
  Специфичность: 0,0,0,1
  Применится, если нет более специфичных правил
*/
p {
  color: blue;
}

/*
  Специфичность: 0,0,1,0
  Переопределит правило для тега p
*/
.text {
  color: green;
}

/*
  Специфичность: 0,1,0,0
  Переопределит правило для класса .text
*/
#main-text {
  color: red;
}

/*
  Специфичность: 1,0,0,0
  Будет применено, если элемент имеет атрибут style="color: purple;"
*/
/* <p style="color: purple;">Текст</p> */

/*
  Специфичность: очень высокая, переопределит все
  Не рекомендуется использовать без крайней необходимости
*/
.override-text {
  color: black !important;
}