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

Существует несколько способов повысить специфичность CSS-селектора:

1. Добавление ID - самый сильный способ:

#header .nav-link { ... } /* 1-1-0 */

2. Добавление классов/атрибутов:

.nav .nav-link.active { ... } /* 0-2-1 */

3. Цепочка селекторов:

div.nav.nav-main > ul > li { ... } /* 0-3-2 */

4. Использование !important (не рекомендуется):

.nav-link { color: red !important; }

5. Вложенность в препроцессорах (Sass/Less):

.nav {
  &__link {
    &--active { ... }
  }
}

Порядок специфичности (от слабого к сильному):

• теги (0-0-1)
• классы/атрибуты (0-1-0)
• ID (1-0-0)
• inline-стили (1-0-0-0)
• !important (игнорирует все)