Как работает CSS specificity?

Specificity — это система приоритетов CSS-селекторов, определяющая какое правило победит при конфликте. Считается как вес: inline-стили (1000) > ID (#id — 100) > классы, атрибуты, псевдоклассы (.class — 10) > теги и псевдоэлементы (div — 1). !important перебивает всё, но это антипаттерн. При равной специфичности побеждает правило, объявленное позже в коде. Понимание специфичности помогает писать предсказуемый CSS без костылей.