Что такое приоритет селектора

Приоритет селектора определяет, какие CSS-правила будут применены к элементу при наличии конфликтующих стилей. Он рассчитывается по весу селекторов:

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

Пример:

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

В этом случае текст станет красным, так как первый селектор имеет больший вес.