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

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

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

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