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

Рассмотрим пример: на полу в коробке сидит кот

<div id="floor">
  <span class="cat-in-box">Кексик</span>
</div>

Допустим в стилях существуют следующие определения:

span {
  background-color: #27ae60; /* Зелёный */
}

div span {
  background-color: #2980b9; /* Синий */
}

#floor .cat-in-box {
  background-color: #34495e; /* Мокрый асфальт */
}

.cat-in-box {
  background-color: #8e44ad; /* Фиолетовый */
}

#floor span {
  background-color: #c0392b; /* Красный */
}

div .cat-in-box {
  background-color: #e67e22; /* Оранжевый */
}

А теперь вопрос на засыпку: какого цвета будет коробка? Сначала сделайте предположение, а затем проверьте.

Почему именно такой и как это определяется мы расскажем в следующем задании.