Sobes.tech
Назад к вопросам
Middle
3

Расскажи про уровни специфичности (каскад) в CSS.

Компании, где спрашивали
BI.ZONE

Ответ от нейросети

sobes.tech AI

В CSS специфичность — это механизм, который определяет, какое именно правило стиля будет применено к элементу, если несколько правил конфликтуют.

Уровни специфичности можно представить как веса, которые складываются из разных частей селектора:

  1. Inline-стили (например, style="...") имеют самый высокий приоритет.
  2. ID-селекторы (#id) дают высокий вес.
  3. Классы, псевдоклассы и атрибуты (.class, :hover, [type="text"]) — средний вес.
  4. Теговые селекторы и псевдоэлементы (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>  /* цвет будет красный */

Таким образом, каскад — это не только порядок правил, но и их специфичность, которая определяет, какое правило применится.