Перед тем как разбирать сложные правила работы каскадирования, расчёта специфичности и определения приоритетов, потренируемся на котиках.

Разберём пример. Вот HTML-код, в котором есть абзац с двумя классами:

<p class="red blue">Синий или красный?</p>

А вот CSS-код c двумя правилами для этих классов:

.blue {
  color: blue;
}

.red {
  color: red;
}

Вопрос: какого цвета будет текст абзаца? Какое из CSS-правил приоритетнее?

Ответ: красного цвета, второе правило приоритетнее.

Это происходит потому, что селекторы у правил одинакового типа, и соответственно обладают одинаковой специфичностью. В таком случае более высоким приоритетом обладает то правило, которое расположено в CSS-коде ниже. В нашем случае это правило для класса red.

В этой серии заданий вам нельзя менять значения CSS-свойств, но можно изменять селекторы или менять порядок CSS-правил в коде.