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

Вес селектора (специфичность) определяет приоритет CSS-правил при конфликте стилей. Рассчитывается по формуле, где каждый тип селектора имеет свой вес:

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

Пример:

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

Важно: !important переопределяет все, а вложенность не увеличивает вес (.parent .child ≠ 20).