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

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

1. Важность:

   • !important (наивысший приоритет, следует использовать осторожно).
   • Обычные правила.

2. Источник:

   • Авторские стили (свои).
   • Пользовательские стили (настройки браузера или user stylesheets).
   • Стили браузера (User Agent Stylesheets).

3. Специфичность: Вычисляется для каждого селектора:

   • Инлайн-стили (стили, заданные в атрибуте 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() берет специфичность наиболее специфичного селектора внутри.

   Специфичность сравнивается слева направо, как числ