Специфичность CSS

Счёт специфичности

Три группы: (A, B, C)

• A — inline styles (style="..."): 1,0,0
• B — ID-селекторы (#main): 0,1,0 каждый
• C — class, псевдокласс, атрибут (.btn, :hover, [type]): 0,0,1 каждый
• Теги и псевдоэлементы (div, ::before): 0,0,1, но в отдельном счёте

Примеры

#nav .item a:hover  → (0,1,2)  /* ID + class + псевдокласс */
.btn.btn-primary    → (0,0,2)
button              → (0,0,1)
/* Побеждает первое */

!important

!important перекрывает любую специфичность. Избегайте — делает CSS непредсказуемым. Оправдан только для утилит (.hidden { display: none !important; }).

Порядок при равной специфичности

Побеждает правило, объявленное позже в CSS.