Каскадность и приоритеты

Это задание архивной главы. Перейдите по ссылке, чтобы пройти задание в актуальной главе.

Когда в предыдущем задании мы задали цвет фона для правила с классом truth, одно из свойств второго абзаца переопределилось:

p {
  padding: 10px;
  background-color: #dff0d8;
}
       +
.truth {
  background-color: #aaddff;
}
       =
стили второго абзаца {
  padding: 10px;
  background-color: #dff0d8;
  background-color: #aaddff;
}

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

1. CSS-правила в значении атрибута style самые приоритетные,
2. за ними идёт селектор с id,
3. затем селектор с классом,
4. затем селектор с именем тега.

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