53 lines
4.2 KiB
Markdown
53 lines
4.2 KiB
Markdown
---
|
||
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 имеют наивысший приоритет.
|
||
- Используйте классы и избегайте избыточной специфичности для поддержания чистоты кода. |