Определите, какой цвет будет у элемента с классом title в каждом из двух примеров CSS кода и объясните почему.

Условие

Определите, какой цвет будет у элемента с классом title в каждом из двух примеров CSS кода и объясните почему.

Первый пример: .parent { position: relative; height: 100vh; }

.box { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }

#card .title { color: red; } .card .title { color: blue; } .title { color: green; }

Второй пример: .parent { position: relative; height: 100vh; }

.box { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }

.title { color: red; } .title { color: blue; } .title { color: green; }

Ответ

В первом примере цвет зависит от HTML: внутри #card — красный, иначе внутри .card — синий, иначе зелёный. Во втором примере побеждает последний зелёный.

При одинаковых остальных условиях каскада #card .title специфичнее .card .title, а тот — .title. Правило участвует только если его селектор совпал: элемент должен находиться внутри соответствующего предка. HTML в условии не приведён, поэтому первый цвет нельзя назвать без этого уточнения. Во втором фрагменте все селекторы одинаковы, и более позднее объявление задаёт зелёный. Правила позиционирования цвет не определяют.