fix: add block-inline tags

docs/html-css/06-selectors.md

@@ -0,0 +1,54 @@
+---
+sidebar_position: 6
+---
+
+# Селекторы, специфичность
+
+**Специфичность селекторов** в 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 имеют наивысший приоритет.
+- Используйте классы и избегайте избыточной специфичности для поддержания чистоты кода.
+  
+🚀 **_Источник: DeepSeek_**