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

Специфичность — это механизм CSS, определяющий, какие стили будут применены к элементу при конфликте правил. Чем выше специфичность селектора, тем больший приоритет он имеет.

Правила расчета (от большего к меньшему):

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

Пример:

#header .menu li { color: red; }   /* 100 + 10 + 1 = 111 */
.menu li.active { color: blue; }  /* 10 + 1 + 10 = 21 */

В этом случае текст будет красным, так как 111 > 21.

Важно: Специфичность не зависит от порядка в CSS, но при равных значениях побеждает последнее объявление.