---
sidebar_position: 5
---

# Селекторы, специфичность
Источник: DeepSeek

**Специфичность селекторов** в CSS — это механизм, который определяет, какие стили будут применены к элементу, если на него влияют несколько конфликтующих правил. Специфичность рассчитывается на основе типа селекторов, и чем выше специфичность, тем выше приоритет стиля.

## Как работает специфичность?
Специфичность рассчитывается как числовое значение, состоящее из четырех частей: `a, b, c, d,` где:
- `a` — стили, указанные в атрибуте `style` (инлайновые стили).
- `b` — количество ID-селекторов.
- `c` — количество классов, псевдоклассов и атрибутов.
- `d` — количество элементов и псевдоэлементов.

Чем больше значение в каждой части, тем выше специфичность. Например:
- Селектор `#id` имеет специфичность `0, 1, 0, 0`.
- Селектор `.class` имеет специфичность `0, 0, 1, 0`.
- Селектор `div` имеет специфичность `0, 0, 0, 1`.

## Правила расчета специфичности
1. **Инлайновые стили** (в атрибуте `style`) имеют наивысшую специфичность: `1, 0, 0, 0`.
2. **ID-селекторы** (`#id`) имеют специфичность: `0, 1, 0, 0`.
3. **Классы, псевдоклассы и атрибуты** (`.class`, `:hover`, `[type="text"]`) имеют специфичность: `0, 0, 1, 0`.
4. **Элементы и псевдоэлементы** (`div`, `::before`) имеют специфичность: `0, 0, 0, 1`.
5. **Универсальный селектор** (`*`) и комбинаторы (например, `>`, `+`, `~`) не увеличивают специфичность.

## Приоритеты
1. **Инлайновые стили** (`style="..."`) всегда имеют наивысший приоритет.
2. **Селекторы с `!important`:**
   - Если к стилю добавлено !important, он переопределяет все остальные правила, независимо от специфичности.
   - Пример: `color: red !important;`.
3. **Специфичность:**
   - Если нет `!important`, применяется правило с наибольшей специфичностью.
4. **Порядок в коде:**
   - Если специфичность одинакова, применяется последнее объявленное правило.

## Как управлять специфичностью?
1. **Избегайте избыточных селекторов:**
   - Используйте минимально необходимую специфичность.
   - Например, вместо div#content используйте #content.
2. **Используйте классы:**
   - Классы имеют умеренную специфичность и легко переопределяются.
3. **Осторожно с `!important`:**
   - Используйте !important только в крайних случаях, так как это усложняет поддержку кода.
4. **Порядок объявления:**
   - Если специфичность одинакова, последнее объявленное правило имеет приоритет.

## Вывод
- Специфичность определяет приоритет CSS-правил.
- Инлайновые стили и !important имеют наивысший приоритет.
- Используйте классы и избегайте избыточной специфичности для поддержания чистоты кода.