Name: Sobes.tech
Rating: 4.9 (250 reviews)

Приоритеты стилей в CSS определяются каскадом:

Важность:
- !important (наивысший приоритет, следует использовать осторожно).
- Обычные правила.
Источник:
- Авторские стили (свои).
- Пользовательские стили (настройки браузера или user stylesheets).
- Стили браузера (User Agent Stylesheets).
Специфичность: Вычисляется для каждого селектора:
- Инлайн-стили (стили, заданные в атрибуте style). Значение: 1-0-0-0.
- Идентификаторы (#id). Значение: 0-1-0-0.
- Классы (.class), атрибуты ([attr]), псевдоклассы (:hover). Значение: 0-0-1-0.
- Элементы (div), псевдоэлементы (::before). Значение: 0-0-0-1.
- Универсальный селектор (*), комбинаторы (+, >), :not(), ::slotted(), :where() не увеличивают специфичность.
- :is() берет специфичность наиболее специфичного селектора внутри.
Специфичность сравнивается слева направо, как числа. Например, 0-1-0-0 специфичнее, чем 0-0-10-0.
Порядок следования в коде: При одинаковой специфичности применяется стиль, объявленный последним.

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

Селектор	Специфичность
`div`	0-0-0-1
`.my-class`	0-0-1-0
`#my-id`	0-1-0-0
`.container div`	0-0-1-1
`#header .title`	0-1-1-0

/* Несмотря на порядок, этот стиль не применится */
div {
  color: red;
}

/* Этот стиль применится, так как специфичность выше */
.my-class {
  color: blue;
}

/* Применится этот стиль, так как специфичность выше */
#my-id {
  color: green;
}

<div id="my-id" class="my-class" style="color: purple;">
  Пример текста
</div>

В данном случае текст будет фиолетовым из-за инлайн-стиля, который имеет наивысшую специфичность среди авторских стилей.

Как в CSS работают различные приоритеты стилей?