Какие есть приоритеты у CSS селекторов?

Специфичность CSS селекторов (CSS Specificity)

Специфичность — это система приоритетов в CSS, которая определяет, какой стиль будет применён, когда к элементу применяются конкурирующие правила. Это основная причина, почему один стиль работает, а другой нет. Понимание специфичности критично для написания поддерживаемого CSS кода и избегания использования !important.

Система вычисления специфичности

Специфичность вычисляется по формуле: a-b-c, где:

• a = количество ID селекторов (#id)
• b = количество CLASS селекторов (.class), атрибутов ([attr]), псевдоклассов (:hover, :focus)
• c = количество ELEMENT селекторов (div, span, p)

Встроенные стили (style attribute) имеют специфичность выше всех селекторов.

Примеры вычисления специфичности

/* Специфичность: 0-0-1 (один элемент) */
p { color: blue; }

/* Специфичность: 0-1-0 (один класс) */
.intro { color: red; }

/* Специфичность: 0-1-1 (один класс + один элемент) */
p.intro { color: green; }

/* Специфичность: 0-2-0 (два класса) */
.intro.highlighted { color: yellow; }

/* Специфичность: 1-0-0 (один ID) */
#header { color: black; }

/* Специфичность: 1-0-1 (один ID + один элемент) */
#header p { color: purple; }

/* Специфичность: 1-1-1 (один ID + один класс + один элемент) */
#header .title p { color: orange; }

/* Специфичность: 0-2-1 (два класса + один элемент) */
div.container.active { color: white; }

/* Специфичность: 0-1-0 (псевдокласс считается как класс) */
a:hover { color: red; }

/* Специфичность: 0-2-1 (класс + псевдокласс + элемент) */
.button:hover p { color: blue; }

/* Специфичность: 0-0-2 (два элемента) */
div span { color: gray; }

/* Специфичность: 0-0-3 (три элемента) */
div > span > a { color: brown; }

/* Специфичность: 1-2-3 (один ID + два класса + три элемента) */
#main .container .item a { color: pink; }

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

1. Встроенные браузерные стили (user agent styles) — 0-0-0
   
2. Пользовательские стили из расширений браузера — 0-0-0
   
3. Авторские стили (твой CSS) — вычисляется
   3a. Элементные селекторы — 0-0-1
   3b. Селекторы атрибутов и псевдоклассы — 0-1-0
   3c. Селекторы классов — 0-1-0
   3d. Селекторы ID — 1-0-0
   
4. Встроенные стили (style attribute) — 1-0-0-0 (считается как 1000 в специфичности)
   
5. !important — абсолютный приоритет (используй редко!)

Практические примеры конфликтов

/* КОНФЛИКТ 1: Класс vs Элемент */

/* Специфичность: 0-0-1 */
p { color: red; }

/* Специфичность: 0-1-0 — ВЫИГРЫВАЕТ */
.text { color: blue; }

/* Результат: .text будет синим */


/* КОНФЛИКТ 2: ID vs Класс */

/* Специфичность: 0-1-0 */
.intro { color: red; }

/* Специфичность: 1-0-0 — ВЫИГРЫВАЕТ */
#header { color: blue; }

/* Результат: #header будет синим */


/* КОНФЛИКТ 3: Множественные классы vs Один ID */

/* Специфичность: 0-3-0 */
.primary.secondary.tertiary { color: red; }

/* Специфичность: 1-0-0 — ВЫИГРЫВАЕТ */
#main { color: blue; }

/* Результат: #main будет синим */


/* КОНФЛИКТ 4: Встроенный стиль vs все селекторы */

/* Специфичность: 1-0-0 */
#header { color: red; }

/* Встроенный стиль: 1-0-0-0 — ВЫИГРЫВАЕТ */
/* <p id="header" style="color: blue;">Text</p> */

/* Результат: текст будет синим */

Таблица сравнения специфичности

Селектор                           Специфичность    Примечание
========================================================
* (универсальный)                 0-0-0             Нет специфичности
p (элемент)                        0-0-1             
p:first-child                      0-1-1             Псевдокласс считается как класс
p::before                          0-0-2             Псевдоэлемент считается как элемент
.container                         0-1-0             
.primary.secondary                 0-2-0             
#header                            1-0-0             
#header .title                     1-1-1             ID + класс + элемент
div > span                         0-0-2             Комбинатор не влияет
div + span                         0-0-2             Комбинатор не влияет
style="color: red"                Переопределяет все селекторы
!important                         Максимальный приоритет

Когда !important считается приемлемым

/* ПЛОХО: Использовать !important везде */
.button { color: blue !important; }
.nav { display: flex !important; }

/* ХОРОШО: Использовать !important только для утилит */
.hidden { display: none !important; }
.text-center { text-align: center !important; }

/* ХОРОШО: Переопределять встроенные стили компонентов */
/* Если компонент использует style attribute */
.override { color: red !important; }

Советы по избежанию проблем со специфичностью

/* 1. Не используй ID селекторы для стилизации */
/* ПЛОХО */
#user-profile { padding: 20px; }

/* ХОРОШО */
.user-profile { padding: 20px; }


/* 2. Не вкладывай селекторы глубоко */
/* ПЛОХО: Специфичность 0-2-3 */
.container .section .item .title p { color: red; }

/* ХОРОШО: Специфичность 0-1-0 */
.item-title { color: red; }


/* 3. Используй BEM или другую методологию для организации */
/* ПЛОХО: Путаница */
.nav .item { color: red; }
.sidebar .nav .item { color: blue; }

/* ХОРОШО: BEM */
.nav__item { color: red; }
.sidebar .nav__item { color: blue; }


/* 4. Если нужно переопределить — увеличивай специфичность,
   не добавляй !important */

/* ПЛОХО */
.button { background: blue; }
.button-primary { background: red !important; }

/* ХОРОШО */
.button { background: blue; }
.button.button-primary { background: red; } /* +1 специфичность */

Инструменты для проверки специфичности

Браузеры (Chrome DevTools, Firefox Inspector) показывают специфичность селекторов в панели styles. Также есть онлайн калькуляторы специфичности CSS. Понимание этой темы поможет избежать багов и написать поддерживаемый код.