Что такое вес селекторов

Вес селектора определяет его приоритет в CSS. Чем выше вес, тем приоритетнее стиль. Вес рассчитывается по формуле:

• инлайн-стили (style="") — 1000
• ID (#id) — 100
• классы (.class), псевдоклассы (:hover), атрибуты ([type="text"]) — 10
• элементы (div), псевдоелементы (::before) — 1
• универсальный селектор (*) — 0

Пример:

#header .menu li.active {} /* 100 + 10 + 1 + 10 = 121 */
div#main .item {}        /* 1 + 100 + 10 = 111 */

При равном весе побеждает последний объявленный стиль. !important перебивает все, но злоупотреблять им не стоит.