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

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

Специфичность определяется на основе четырёх компонентов: purpleschool.ru

1. Селекторы тегов и псевдоэлементы (например, div, p, ::before) — 1 балл за каждый. purpleschool.ru
2. Селекторы классов, атрибутов и псевдоклассы (например, .class, [type=”text”], :hover) — 10 баллов за каждый. purpleschool.ru
3. Селекторы идентификаторов (например, #id) — 100 баллов за каждый. purpleschool.ru
4. Встроенные стили (например, style=”…”) — 1000 баллов за каждый. purpleschool.ru

Каждому из этих компонентов присваивается определённое количество баллов, которые затем суммируются для определения общей специфичности. purpleschool.ru

Чем выше специфичность, тем выше приоритет. purpleschool.ru Из всех правил выигрывает то, которое набирает наибольшее количество баллов. itchief.ru Если у сравниваемых селекторов специфичность одинаковая, то будет применяться тот, который расположен последним. itchief.ru

Пример: к элементу <div> применяются три правила: purpleschool.ru

1. div { color: blue; } — специфичность 1. purpleschool.ru
2. .example { color: green; } — специфичность 10. purpleschool.ru
3. #unique { color: red; } — специфичность 100. purpleschool.ru

Браузер выберет правило с наивысшей специфичностью, то есть #unique { color: red; }, и текст будет красного цвета. purpleschool.ru