Текст будет красным: #element имеет большую специфичность, чем .element и div.element. Более поздняя запись с magenta не отменяет правило с id.
Определение цвета текста внутри div‑элемента
Текст будет красным: #element имеет большую специфичность, чем .element и div.element. Более поздняя запись с magenta не отменяет правило с id.
Короткий ответ
Что ответить на собеседовании
Подробный разбор
Ответ с пояснениями
Условие
Нужно выяснить, какой цвет будет применён к тексту внутри тега <div id="element" class="element">, учитывая правила специфичности CSS.
<html>
<head>
<style>
#element {
color: red;
}
.element {
color: blue;
}
div.element {
color: yellow;
}
div.element {
color: magenta;
}
</style>
</head>
<body>
<div id="element" class="element">
Some dummy text
</div>
</body>
</html>
Ответ
Текст будет красным: #element имеет большую специфичность, чем .element и div.element. Более поздняя запись с magenta не отменяет правило с id.
В одной и той же таблице стилей, без !important и дополнительных cascade layers, специфичность #element — (1,0,0), .element — (0,1,0), div.element — (0,1,1). Сначала сравниваются эти веса, и только при равенстве важен порядок объявления.
Два div.element между собой выбрали бы magenta, но оба проигрывают #element. Если изменить происхождение правил, важность или слои каскада, одного сравнения специфичности уже недостаточно; в данном фрагменте таких факторов нет.