Специфичность селектора в CSS
Специфичность селектора в CSS определяет, какой стиль будет применён, если несколько селекторов подходят к одному элементу. Чем выше специфичность, тем выше приоритет у стиля.
Формула специфичности
Специфичность вычисляется на основе трёх категорий
Важно: В классической системе подсчёта специфичности не учитывается !important, поскольку это отдельное понятие, которое переопределяет всё. Обычно говорят о трёх категориях, однако для полноты картины можно упомянуть !important как особый случай:
- !important переопределяет все обычные стили (отдельно от механизма специфичности)
- Inline-стили (встроенные стили, например,
style="color: red;") имеют самый высокий приоритет. - Идентификаторы (ID) дают вес в 100 очков за каждый.
- Классы, атрибуты и псевдоклассы добавляют 10 очков за каждый.
- Теги и псевдоэлементы добавляют 1 очко за каждый.
Пример специфичности
| Селектор | Специфичность | Объяснение |
|---|---|---|
* | 0, 0, 0 | Универсальный селектор, минимальный вес. |
p | 0, 0, 1 | Один тег (1 очко). |
.class | 0, 1, 0 | Один класс (10 очков). |
#id | 1, 0, 0 | Один идентификатор (100 очков). |
div.class | 0, 1, 1 | Один тег (1) и один класс (10). |
#id .class p | 1, 1, 1 | Один ID (100), один класс (10), один тег (1). |
style="color: red;" | Inline-стиль | Максимальная специфичность. |
Как работает специфичность
Когда к элементу применяются стили из разных селекторов, используется селектор с большей специфичностью. Если специфичность одинакова, применяется стиль, который находится ниже в коде (правило каскада).
Пример
<div id="example" class="box">
Пример текста
</div>
/* Стили */
div { color: black; } /* 0, 0, 1 */
.box { color: blue; } /* 0, 1, 0 */
#example { color: red; } /* 1, 0, 0 */
/* Итоговый стиль: цвет текста будет красным (#example). */
Совет:
Избегайте чрезмерного использования ID-селекторов. Это делает код менее гибким и усложняет переопределение стилей.