Назад к вопросам
Middle
3
Расскажи про уровни специфичности (каскад) в CSS.
Компании, где спрашивали
BI.ZONE
Ответ от нейросети
sobes.tech AI
В CSS специфичность — это механизм, который определяет, какое именно правило стиля будет применено к элементу, если несколько правил конфликтуют.
Уровни специфичности можно представить как веса, которые складываются из разных частей селектора:
- Inline-стили (например,
style="...") имеют самый высокий приоритет. - ID-селекторы (
#id) дают высокий вес. - Классы, псевдоклассы и атрибуты (
.class,:hover,[type="text"]) — средний вес. - Теговые селекторы и псевдоэлементы (
div,::before) — низкий вес.
Пример подсчёта специфичности:
#header .menu li a:hover— 1 ID + 2 класса/псевдокласса + 2 тега = (1,2,2).menu li a— 0 ID + 1 класс + 2 тега = (0,1,2)
Чем выше специфичность, тем приоритетнее правило. Если специфичность равна, выигрывает правило, объявленное позже.
Пример:
#id { color: red; } /* специфичность 1,0,0 */
.class { color: blue; } /* 0,1,0 */
div { color: green; } /* 0,0,1 */
<div id="id" class="class">Текст</div> /* цвет будет красный */
Таким образом, каскад — это не только порядок правил, но и их специфичность, которая определяет, какое правило применится.