Что такое CSS Specificity

CSS Specificity (специфичность) определяет, какие стили будут применены к элементу при конфликте правил. Это вес селектора, вычисляемый по формуле:

• inline-стили (style="") – 1000
• ID (#id) – 100
• классы/псевдоклассы/атрибуты (.class, :hover, [type="text"]) – 10
• теги/псевдоэлементы (div, ::before) – 1

Пример:

#header .nav-link { /* 100 + 10 = 110 */ }
.nav-link.active { /* 10 + 10 = 20 */ }
div.nav-link { /* 1 + 10 = 11 */ }

При равной специфичности побеждает последнее объявленное правило. !important переопределяет все, но злоупотреблять им не стоит.