Что вы знаете о приоритете селекторов в CSS?

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

Специфичность складывается из четырех компонентов (условно — A, B, C, D):

• A: Количество стилевых атрибутов в HTML (например, <div style="color: red;">). Имеет наивысший приоритет.
• B: Количество идентификаторов (#id) в селекторе.
• C: Количество классов (.class), атрибутов ([attribute]), и псевдоклассов (:hover, :focus и т.д.) в селекторе.
• D: Количество тегов (div, p) и псевдоэлементов (::before, ::after и т.д.) в селекторе.

Правило с более высокой специфичностью переопределяет правило с более низкой специфичностью. Более высокая специфичность определяется сравнением компонентов по порядку: A, затем B, C, D. Если специфичность одинакова, применяется правило, объявленное позже в коде.

Важные моменты:

• Универсальный селектор (*) имеет специфичность (0,0,0,0).
• Наследование стилей имеет самый низкий приоритет, специфичность не играет роли.
• Маркер !important переопределяет любую специфичность, но его использование не рекомендуется из-за сложности дальнейшего сопровождения кода.

Пример расчета специфичности:

• p -> (0,0,0,1)
• .intro -> (0,0,1,0)
• #main -> (0,1,0,0)
• div p -> (0,0,0,2)
• div.container p:first-child -> (0,0,2,2)
• <div style="color: red;"> -> (1,0,0,0)

/* Специфичность (0,0,0,1) */
p {
  color: red;
}

/* Специфичность (0,0,1,0) */
.text {
  color: blue; /* Этот стиль переопределит красный, если элемент имеет класс "text" */
}

/* Специфичность (0,1,0,0) */
#my-paragraph {
  color: green; /* Этот стиль переопределит синий, если элемент имеет id "my-paragraph" */
}

/* Специфичность (0,0,0,2) */
div p {
  color: orange; /* Этот стиль переопределит синий, но не зеленый */
}