Расскажи про специфичность селекторов CSS. Как она высчитывается? Какой самый специфичный селектор?

Специфичность селектора CSS — это числовое значение, которое определяет приоритет применения стилей, если несколько правил конфликтуют.

Как высчитывается специфичность

Специфичность обычно представляют в виде четырёхзначного числа (a,b,c,d):

• a — если стиль задан через inline-стиль (например, style=""), то a=1, иначе 0
• b — количество ID-селекторов в селекторе
• c — количество классов, псевдоклассов и атрибутных селекторов
• d — количество тегов и псевдоэлементов

Пример: селектор #menu .item > a:hover

• ID-селектор: #menu → b=1
• Класс .item и псевдокласс :hover → c=2
• Тег a → d=1
• Inline-стилей нет → a=0

Специфичность: (0,1,2,1)

Самый специфичный селектор

Самый специфичный — это inline-стиль (a=1), который всегда имеет приоритет над любыми селекторами из CSS.

Если сравнивать селекторы без inline-стилей, то селектор с большим количеством ID-селекторов будет иметь более высокий приоритет.

Итог

Специфичность помогает браузеру определить, какое правило CSS применить, если несколько правил подходят к одному элементу. Чем выше специфичность, тем выше приоритет.