Блок div имеет атрибуты id="main" и class="card". Внутри него три абзаца: первый — p с class="note"; второй — p с class="note" и id="x"; третий — p с атрибутом style="color: black". В подключённой таблице стилей правила идут в таком порядке:
p { color: green; }
.card p { color: blue; }
.note { color: red; }
#main p { color: orange; }
p#x { color: purple; }
Какими цветами будет отображён текст первого, второго и третьего абзацев соответственно?
Показать ответ и разборСкрыть ответ и разбор
Верный ответ
- Dоранжевый, фиолетовый, чёрный
Разбор
Побеждает правило с большей специфичностью: встроенный стиль сильнее любых селекторов, затем идут идентификаторы, потом классы, потом теги. При равной специфичности применяется правило, расположенное ниже. Первый абзац: «p» (0,0,1), «.card p» (0,1,1), «.note» (0,1,0), «#main p» (1,0,1); наибольшая специфичность у «#main p», поэтому текст оранжевый. Второй абзац: подходят те же правила и ещё «p#x» (1,0,1); специфичность «#main p» и «p#x» равна, и применяется более позднее правило «p#x», поэтому текст фиолетовый. Третий абзац: атрибут style (встроенный стиль) сильнее всех правил таблицы, поэтому текст чёрный. Верный ответ: «оранжевый, фиолетовый, чёрный».