Дан фрагмент HTML-документа и таблица стилей:
<div id="menu">
<p class="item">A</p>
<p class="item" style="color: purple;">B</p>
<p id="last">C</p>
</div>
p { color: red; }
.item { color: blue !important; }
#menu p { color: green; }
#last { color: black; }
Какого цвета будет текст абзацев A, B и C соответственно?
Показать ответ и разборСкрыть ответ и разбор
Верный ответ
- Aсиний, синий, зелёный
Разбор
Абзац A: подходят правила p (красный), .item (синий с !important) и #menu p (зелёный). Объявление с !important побеждает остальные независимо от специфичности, поэтому текст синий. Абзац B: к нему применяется то же правило .item, а также встроенный стиль purple. Встроенный стиль сильнее обычных правил, но объявление !important из таблицы стилей сильнее встроенного стиля без !important, поэтому текст синий, а не фиолетовый. Абзац C: класса item у него нет, поэтому подходят p (красный), #menu p и #last. Специфичность #menu p равна (1,0,1), у #last равна (1,0,0), значит, #menu p сильнее, и текст зелёный. Итог: синий, синий, зелёный.