Специфичность CSS
Когда несколько правил применяются к одному элементу, браузер выбирает то, у которого специфичность выше.
Вес селекторов
| Тип | Пример | Вес |
|---|---|---|
| Inline-стиль | style="..." | 1-0-0-0 |
| ID | #header | 0-1-0-0 |
| Class / псевдокласс / атрибут | .btn, :hover, [type] | 0-0-1-0 |
| Тег / псевдоэлемент | div, ::before | 0-0-0-1 |
| Универсальный * | * | 0-0-0-0 |
Подсчёт
p { color: black } /* 0-0-0-1 */
p.intro { color: blue } /* 0-0-1-1 */
#main { color: red } /* 0-1-0-0 */
При равной специфичности побеждает последнее правило.
!important
Перекрывает всю специфичность. Используйте только в крайних случаях (utility-классы, переопределение third-party).