Дан фрагмент таблицы стилей: p { color: blue; } .note { color: green; } #main p { color: red; }. В HTML-документе есть блок с идентификатором main, внутри него абзац p с классом note. Сопоставьте условие с цветом текста абзаца, который покажет браузер:
1. Цвет текста абзаца при исходных трёх правилах
2. Цвет текста после добавления правила .note { color: green !important; } и атрибута style="color: orange" у этого абзаца
Показать ответ и разборСкрыть ответ и разбор
Верный ответ
- 1Cкрасный
- 2Aзелёный
Разбор
Строка 1. Подходят все три правила. Специфичность: селектор p — (0,0,1), селектор .note — (0,1,0), селектор #main p — (1,0,1). Самая высокая у #main p, поэтому текст будет «красный». Строка 2. Объявление с !important имеет приоритет над обычными объявлениями, в том числе над встроенным атрибутом style и правилом с идентификатором. Поэтому выигрывает правило .note, и текст будет «зелёный», а не «оранжевый» и не «красный».