Урок 12. Решения: Каскад, наследование и специфичность

📁 Раздел: Основы CSS ⏱️ Время изучения: ~45 мин 🎯 Сложность: Начальная
#p #hover #style

⚡ Кратко

Сверяйтесь с решениями после собственной попытки. Главный навык — посчитать специфичность (inline, id, class, tag) и предсказать победителя до запуска браузера.

Разбор заданий

Задание 1–2. Три правила на один абзац — кто победит?

Для <p class="text" id="lead"> заданы правила по тегу, классу и id. Считаем разряды: p = (0,0,0,1), .text = (0,0,1,0), #lead = (0,1,0,0). Старший ненулевой разряд у id — побеждает красный.

Текст красный — победил #lead (0,1,0,0), он сильнее класса и тега.

p     { color: #1f2937; } /* (0,0,0,1) */
.text { color: #2563eb; } /* (0,0,1,0) */
#lead { color: #b91c1c; } /* (0,1,0,0) ← победитель */

Задание 3. Поменять порядок при равной специфичности

Два класса .tag имеют одинаковую специфичность (0,0,1,0). Поменяв правила местами, мы меняем победителя — теперь фон фиолетовый, потому что это правило стало нижним.

Бейдж 
.tag { background: #0f766e; } /* (0,0,1,0) */
.tag { background: #8250df; } /* (0,0,1,0) ← ниже → побеждает */

Задание 4–5. Наследование вместо !important

Вместо борьбы флагами задаём color на родителе — дети наследуют его без отдельных правил. Так конфликт решается «понижением», а не «повышением ставок».

Родитель задаёт цвет.

Дочерний абзац — тот же бирюзовый по наследству, без своего правила и без !important.

.article { color: #0f766e; } /* наследуется детьми */
/* отдельное правило для <p> и !important не нужны */

Как проверять себя в DevTools

  1. F12 → выбрать элемент → панель Styles.
  2. Перечёркнутые объявления — это проигравшие правила (по специфичности или порядку).
  3. Наследованные свойства показаны в блоке Inherited from.
Критерий готовности: вы можете изменить пример под новую задачу и объяснить через разряды (inline, id, class, tag), почему результат изменился.