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

Специфичность определяет, какой стиль применится к элементу при конфликте правил. Рассчитывается по весу селекторов:

1. Инлайн-стили (style="") — 1000
2. ID (#id) — 100
3. Классы/атрибуты/псевдоклассы (.class, [type="text"], :hover) — 10
4. Теги/псевдоэлементы (div, ::before) — 1

Комбинаторы (>, +, ~) и универсальный селектор (*) не увеличивают специфичность.

Пример:

#header .nav li.active {} /* 100 + 10 + 1 + 10 = 121 */
div#header li:hover {}    /* 1 + 100 + 1 + 10 = 112 */

Важно: !important переопределяет все, но злоупотреблять им не стоит. Для вычисления специфичности сравниваются значения слева направо.