Какво знаете за специфичността на CSS селекторите…

Специфичността определя приоритета на CSS правилата при конфликт, когато към един и същи елемент се прилагат различни стилове. Тя се изчислява за всеки селектор в правилото.

Специфичността е числова оценка, съставена от четири категории (A, B, C, D), записана като 0,0,0,0. Колкото по-високо е числото, толкова по-висока е специфичността.

Категории:

A (инлайн стил): Стилове, зададени чрез атрибута style в HTML елемента. Те имат най-висока специфичност (например, 1,0,0,0).
B (ID): Селектори по ID (например, #моя-ид). Увеличават втората цифра (например, 0,1,0,0).
C (Клас, Атрибут, Псевдоклас): Селектори по клас (например, .моя-клас), атрибут (например, [type="text"]), псевдоклас (например, :hover, :first-child). Увеличават третата цифра (например, 0,0,1,0).
D (Елемент, Псевдо-елемент): Селектори по HTML таг (например, div, p) и псевдо-елементи (например, ::before, ::after). Увеличават четвъртата цифра (например, 0,0,0,1).

Пример за изчисление:

p - 0,0,0,1
.моя-клас - 0,0,1,0
#моя-ид - 0,1,0,0
div p - 0,0,0,2 (сумата на специфичностите на двата елемента)
#моя-ид .моя-клас - 0,1,1,0 (сумата на ID и класа)
div#моя-ид.моя-клас:hover - 0,1,2,1 (сумата на елемента, ID, класа и псевдо-клас)

Правила:

Специфичността на inline стил винаги е по-висока от всяка комбинация от други селектори, освен правилата с флага !important.
Правилата с флага !important имат най-висок приоритет, като дори и inline стиловете се отменят. Използването на !important не се препоръчва поради трудностите при отстраняване на грешки.
При равна специфичност, се прилага правилото, което е последно декларирано в CSS файла.
Универсалният селектор (*) и :where() имат специфичност 0,0,0,0 и не увеличават общата специфичност.

/*
  Специфичност: 0,0,0,1
  Ще се приложи, ако няма по-специфични правила
*/
p {
  color: blue;
}

/*
  Специфичност: 0,0,1,0
  Ще презапише правилото за таг p
*/
.text {
  color: green;
}

/*
  Специфичност: 0,1,0,0
  Ще презапише правилото за класа .text
*/
#главен-текст {
  color: red;
}

/*
  Специфичност: 1,0,0,0
  Ще се приложи, ако е зададен атрибутът style="color: purple;"
*/
/* <p style="color: purple;">Текст</p> */

/*
  Много висока специфичност, ще презапише всичко
  Не се препоръчва да се използва без крайна необходимост
*/
.override-text {
  color: black !important;
}

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