Как рассчитывается специфичность CSS-селекторов: что сильнее — inline-стили, !important, ID, классы или теги?

Специфичность CSS-селектора определяется по правилам:

• Inline-стили (style="...") — самая высокая специфичность.
• ID-селекторы (#id) — высокая специфичность.
• Классы (.class), псевдоклассы (:hover), атрибуты ([type="text"]) — средняя специфичность.
• Теги (h2, div) и псевдоэлементы (::before) — низкая специфичность.

Если у двух тегов H2 есть конкурирующие стили, применится стиль с более высокой специфичностью. Если специфичность равна, то применяется последний по порядку в CSS.

Пример расположения селекторов по возрастанию специфичности:

h2 { color: blue; } /* 0,0,0,1 */
.className h2 { color: green; } /* 0,0,1,1 */
#uniqueId h2 { color: red; } /* 0,1,0,1 */
style="color: yellow;" /* inline-стиль, самая высокая специфичность */

В итоге, если у двух H2 есть стили с селекторами h2 и #uniqueId h2, применится стиль с ID-селектором.