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

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

Порядок приоритетов (от низкого к высокому):

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

Пример:

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

Во втором случае стиль не применится, т.к. 112 < 121.