Get Mystery Box with random crypto!

Что такое специфичность CSS-селекторов и как она работает? В | Тостер

Что такое специфичность CSS-селекторов и как она работает?

В списке типы селекторов расположены по возрастанию специфичности:

0. Cелекторы типов элементов (например, h1) и псевдоэлементов (например, ::before);
1. Cелекторы классов (например, .example), селекторы атрибутов (например, [type="radio"]) и псевдоклассов (например, :hover);
2. Cелекторы идентификаторов (например, #example).

Универсальный селектор (*), комбинаторы (+, >, ~, ' ') и отрицающий псевдокласс (:not()) не влияют на специфичность. (Однако селекторы, объявленные внутри :not(), влияют)

Стили, обьявленные в элементе (например, style="font-weight:bold"), всегда переопределяют любые правила из внешних файлов стилей и, таким образом, их специфичность можно считать наивысшей.

Расчёт специфичности
тег и псевдоэлемент имеют специфичность 0001;
класс, псевдокласс, атрибут - 0010;
id имеет специфичность 0100;
инлайновый стиль имеет приоритет 1000;

#css