Специфичность в CSS
Специфичность CSS определяет какой селектор будет применён к тегу, если у тега несколько правил.
Например, какого цвета будет абзац из кода ниже?
<style>
#abzac { color: red; }
.abzac { color: blue; }
p { color: orange; }
</style>
<p id="abzac" class="abzac">
Изучаем понятие специфичности в языке CSS.
</p>
Ответ: Красным. Почему именно красный, а не синий или оранжевый и отвечает понятие «специфичности в CSS».
Какой именно селектор применить к конкретному тегу, браузер определяет по «весу» селектора.
Самый большой вес у идентификаторов (id), затем у классов (class), потом у тегов (tag). Вот как это выглядит в таблице:
| tag, ::псевдоэлемент | .класс, :псевдокласс, селектор атрибута | #идентификатор | |
| Специфичность: | 0 | 1 | 2 |
По таблице мы видим что наивысший приоритет у идентификаторов. В современной CSS-верстке обычно используют псевдоэлементы, классы и псевдоклассы.
Важные замечания о специфичности в CSS
Если у селекторов одинаковый вес, то применяется тот который располагается в коде ниже.
Атрибут style=" " внутри тега, перебивает любые селекторы, в коде ниже, абзац будет зелёного цвета.
<style>
#abzac { color: red; }
.abzac { color: blue; }
p { color: orange; }
</style>
<p id="abzac" class="abzac" style="color: green;">
Изучаем понятие специфичности в языке CSS.
</p>
Самый наивысший приоритет у модификатора !important, в коде ниже, абзац будет синего цвета.
<style>
#abzac { color: red; }
.abzac { color: blue !important; }
p { color: orange; }
</style>
<p id="abzac" class="abzac" style="color: green;">
Изучаем понятие специфичности в языке CSS.
</p>
Два класса перекрывают один класс, но тысяча классов не сможет перекрыть один идентификатор.
Универсальный селектор * и комбинаторы ( , >, +, ~), не влияют на специфичность.
Псевдокласс :not() в специфичности не участвует, но селекторы расположенные внутри этого псевдокласса участвуют.