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

Специфичность в CSS определяет, какие стили будут применены к элементу при конфликте правил. Она рассчитывается по весу селекторов:

1. Инлайн-стили (style="") — 1000
2. ID (#id) — 100
3. Классы/псевдоклассы (.class, :hover) — 10
4. Теги/псевдоэлементы (div, ::before) — 1

Пример:

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

Применится красный цвет, так как 111 > 21 > 1. Если правила имеют одинаковую специфичность, побеждает последнее объявленное.