Приоритет селекторов в CSS определяет, какое правило будет применено к элементу, если на него воздействуют несколько правил с разными селекторами. Приоритет рассчитывается на основе специфичности селектора.
Специфичность складывается из четырех компонентов (условно — A, B, C, D):
<div style="color: red;">). Имеет наивысший приоритет.#id) в селекторе..class), атрибутов ([attribute]), и псевдоклассов (:hover, :focus и т.д.) в селекторе.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)css