Specificity (специфичность) — это система, по которой браузер решает, какое CSS-правило(rule) применить к элементу, если таких правил несколько. Проще говоря, это ответ на вопрос: "какое правило сильнее?" Браузер читает все правила и применяет то, у которого наибольшая специфичность.

Почему возникает эта проблема?

В вашем CSS к одному и тому же элементу могут приходить стили из разных мест. Например, селектор p, класс .text и ID #title могут задавать разные цвета одному элементу. Браузер видит всё это — но применить может только одно. Именно здесь и вступает в игру specificity.

Как считается Specificity?

У каждого типа селектора есть своё значение("очки"):

ID селектор → 100 очков → #header

Class селектор → 10 очков → .card

Элемент селектор → 1 очко → p, div, h1

Inline style → 1000 очков → style="color: red"

То есть 1 id сильнее 10-ти классов. А 1 inline style перекрывает всё.

Пример:

p { color: blue; } /* 1 очко */

.text { color: green; } /* 10 очков */

#title { color: red; } /* 100 очков */

Если у элемента <p> есть и класс .text, и ID #title — цвет будет красным, потому что у ID наибольшее количество очков.

Что такое !important?

Написав !important, можно принудительно сделать любое правило главным:

p { color: blue !important; }

Это правило победит независимо от специфичности. Однако злоупотреблять !important не рекомендуется — код становится трудночитаемым и в будущем могут возникнуть проблемы.

Почему это важно?

Разработчики, которые не понимают specificity, часто сталкиваются с вопросом: "почему мой стиль не работает?" Если ваш CSS не применяется — скорее всего, другое правило имеет более высокую специфичность. Знание этого значительно упрощает поиск и исправление ошибок в CSS.