Специфичность CSS: какое правило победит
Как разбирать конфликт селекторов и почему порядок строк решает не всегда.
Как это работает
Специфичность сравнивает вес селекторов внутри соответствующего уровня каскада. ID обычно весит больше класса, а класс — больше имени тега. Если специфичность равна и остальные условия каскада одинаковы, преимущество получает более позднее объявление.
До специфичности учитываются происхождение, важность и слои каскада. Поэтому простая формула «более длинный селектор всегда побеждает» неверна. При отладке откройте вычисленное свойство в инструментах браузера и найдите правило, которое действительно дало значение.
Пример в интерфейсе
.note { color: #11694e; }
p { color: #a43d20; }Значения и поведение
| Значение или правило | Результат |
|---|---|
| ID | Отдельная старшая составляющая веса. |
| Классы, атрибуты, псевдоклассы | Следующая составляющая. |
| Типы и псевдоэлементы | Младшая составляющая. |
| :where(…) | Нулевая специфичность самого селектора и аргументов. |
На что обратить внимание
Проверьте на практике
Поменяйте местами правила p и .note. Цвет останется зелёным: класс выигрывает у типа в этих одинаковых условиях каскада.
Связанные темы: selectors, custom-properties.