Специфичность в CSS

Рассматриваем вопрос о специфичности в CSS
Специфичность в 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,
::псевдоэлемент
.класс,
:псевдокласс,
селектор атрибута

#идентификатор
Специфичность:012

По таблице мы видим что наивысший приоритет у идентификаторов. В современной 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() в специфичности не участвует, но селекторы расположенные внутри этого псевдокласса участвуют.


Дата публикации поста: 18 июля 2019
Дата обновления поста: 18 июля 2019

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *