CSS спецификация и каскад

Недавний опрос вызвал бурные обсуждения, из которых можно сделать вывод, что у некоторых разработчиков наблюдается пробел в знаниях CSS.
Не будем зацикливаться на раздувании споров. Вместо этого углубимся в теорию и проведем время с пользой.
Пример под рукой
Используем тот же пример, который использовался в опросе. Я заменил color на background и использовал более приятные цвета.
index.html
<main>
<div class="red blue"></div>
<div class="blue red"></div>
</main>
style.css
.red {
background: #c23616;
}
.blue {
background: #4b7bec;
}
/* Нерелевантный вид и стили */
body {
height: 100vh;
margin: 0;
display: grid;
place-items: center;
}
main {
padding: 2rem;
}
div {
width: 180px;
height: 180px;
border-radius: 5px;
}
div + div {
margin-top: 10px;
}
Результат:
Как видите, оба блока синего цвета. Но почему? Причина этого заключается в том, что и .red, и .blue имеют одинаковый уровень специфичности. Поэтому браузер выбирает последний стиль в CSS-коде. В примере – это .blue.
Если поменять местами объявления классов в CSS, то получим следующее:
index.html
<main>
<div class="red blue"></div>
<div class="blue red"></div>
</main>
style.css
.blue {
background: #4b7bec;
}
.red {
background: #c23616;
}
/* Нерелевантный вид и стили */
body {
height: 100vh;
margin: 0;
display: grid;
place-items: center;
}
main {
padding: 2rem;
}
div {
width: 180px;
height: 180px;
border-radius: 5px;
}
div + div {
margin-top: 10px;
}
Результат:
Вопросы / Комментарии / Отзывы