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

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

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

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

Когда к элементу применяются стили из разных селекторов, используется селектор с большей специфичностью. www.hackfrontend.com Если специфичность одинакова, применяется стиль, который находится ниже в коде (правило каскада). www.hackfrontend.com