Комментарии (2)
Ответ сгенерирован нейросетью и может содержать ошибки
Специфичность CSS селекторов - управление приоритетом стилей
Специфичность определяет, какой стиль применится, когда к элементу применяются конфликтующие правила. Вот полное руководство по повышению специфичности:
1. Понимание расчета специфичности
Специфичность вычисляется как число из четырех цифр (a,b,c,d):
// a = inline styles (style="")
// b = ID селекторы (#id)
// c = class, attribute, pseudo-class селекторы
// d = element селекторы
const specificity = {
'p': (0,0,0,1), // 1 элемент
'.text': (0,0,1,0), // 1 класс
'#header': (0,1,0,0), // 1 ID
'style=""': (1,0,0,0), // inline стиль
'div.container > p.text': (0,0,1,1), // 1 класс + 1 элемент
'div#header.active.primary': (0,1,2,1), // 1 ID + 2 класса + 1 элемент
};
// Сравнение: (0,1,0,0) всегда выигрывает у (0,0,99,99)
// ID-селектор выигрывает у любого количества классов
2. Повышение специфичности через составные селекторы
Добавляй классы и комбинаторы:
/* Специфичность (0,0,1,0) - слишком низкая */
.button { background: blue; }
/* Специфичность (0,0,2,0) - выше */
.button.primary { background: navy; }
/* Специфичность (0,0,3,0) - еще выше */
.button.primary.active { background: darkblue; }
/* Специфичность (0,0,2,1) - еще выше */
btn.button.primary { background: darkblue; }
3. Использование селекторов атрибутов
Атрибуты считаются как классы (0,0,1,0):
/* Специфичность (0,0,1,0) */
[data-variant="primary"] { color: blue; }
/* Специфичность (0,0,2,0) */
input[type="text"][disabled] { opacity: 0.5; }
/* Специфичность (0,0,2,1) */
input[type="text"][required] { border: 2px solid red; }
4. Использование псевдо-классов
Псевдо-классы (:hover, :active, :focus) учитываются как классы:
/* Специфичность (0,0,1,0) */
a:hover { color: red; }
/* Специфичность (0,0,2,1) */
a.link:hover { color: darkred; }
/* Специфичность (0,0,3,0) */
button:active:focus:enabled { outline: 2px solid blue; }
5. Комбинаторы и селекторы потомков
Каждый уровень в цепочке добавляет специфичность:
/* Специфичность (0,0,1,1) */
div .button { padding: 10px; }
/* Специфичность (0,0,1,2) */
div > section .button { padding: 10px; }
/* Специфичность (0,0,2,3) */
main > section.container div.button.active { padding: 10px; }
6. Использование ID селекторов (осторожно!)
ID селекторы имеют очень высокую специфичность (0,1,0,0):
/* Специфичность (0,1,0,0) - выигрывает почти всё */
#save-button { background: green; }
/* Специфичность (0,1,1,0) - еще выше */
#form-section .button { padding: 15px; }
/* Специфичность (0,1,2,1) - максимум без inline */
#header.active div.button { background: darkgreen; }
ОБОСНОВАНИЕ: ID-селекторы лучше использовать редко, так как они сложнее переопределять. Предпочитай классы.
7. Inline стили (последняя средство)
Inline стили имеют специфичность (1,0,0,0) - выигрывают почти всё:
<!-- Специфичность (1,0,0,0) - победит любой CSS селектор -->
<button style="background: red;">Save</button>
ОБОСНОВАНИЕ: Избегай inline стилей! Они затрудняют поддержку и тестирование.
8. Практический пример - иерархия стилей
/* Уровень 1: Базовые стили (0,0,1,1) */
button { padding: 10px; background: gray; }
/* Уровень 2: Вариации класса (0,0,1,0) */
.btn-primary { background: blue; }
/* Уровень 3: Состояния (0,0,2,1) */
button.btn-primary:hover { background: darkblue; }
/* Уровень 4: Контекст (0,0,2,2) */
form .btn-primary { padding: 15px; }
/* Уровень 5: Модификаторы (0,0,3,1) */
button.btn-primary.btn-large.btn-disabled { opacity: 0.5; }
9. Использование :is() и :where() для управления
Те функции позволяют контролировать специфичность:
/* :is() использует специфичность самого специфичного селектора */
:is(.button, .btn, .link) { padding: 10px; } /* Специфичность (0,0,1,0) */
/* :where() имеет нулевую специфичность - удобно для базовых стилей */
:where(.button, .btn, .link) { padding: 10px; } /* Специфичность (0,0,0,0) */
/* Позволяет легко переопределять в конкретных контекстах */
.form .button { padding: 15px; } /* Выигрывает у :where() */
10. Практический совет: Используй инструменты для проверки
// Chrome DevTools: Inspect элемент -> Styles tab
// Видишь все применённые и переопределённые стили
// Показывает специфичность каждого правила
// Или используй CSS специфичность калькулятор:
// https://specificity.keegan.st/
Итог
Повышение специфичности идёт по порядку: элементы (0,0,0,1) -> классы (0,0,1,0) -> ID (0,1,0,0) -> inline (1,0,0,0). Лучшая практика: оставайся в низкой специфичности, используя классы и комбинаторы. Высокая специфичность затрудняет переопределение и поддержку. В современных проектах (Tailwind CSS) специфичность часто не проблема благодаря ютилити классам.