Дан фрагмент веб-страницы:
<style>
p { color: red; }
.a { color: blue; }
#x { color: green; }
div p { color: black; }
</style>
<div>
<p>1</p>
<p class="a">2</p>
<p id="x" class="a">3</p>
</div>
<p>4</p>
Какого цвета будет текст абзацев 1, 2, 3, 4 соответственно при отображении в браузере?
Показать ответ и разборСкрыть ответ и разбор
Верный ответ
- Cчёрный, синий, зелёный, красный
Разбор
Сравниваем специфичность селекторов: id (#x) сильнее класса (.a), класс сильнее селектора вложенного элемента «div p» (два тега), а он сильнее простого селектора «p». Абзац 1 находится в div и не имеет класса, поэтому применяется «div p» — чёрный. Абзац 2 подпадает под «div p» и «.a», побеждает класс — синий. Абзац 3 подпадает под «p», «div p», «.a» и «#x», побеждает идентификатор — зелёный. Абзац 4 вне div, к нему применяется только «p» — красный. Получаем: чёрный, синий, зелёный, красный.