На веб-странице абзац (элемент p) с идентификатором t и классом note находится внутри блока div с классом box. У абзаца есть атрибут style со значением: color: black; font-size: 12px. В таблице стилей заданы правила:
p { color: blue; font-size: 14px; }
.box p { color: green; font-size: 16px; }
p.note { color: red; }
#t { font-size: 20px; }
.box .note { color: purple !important; }
Какими будут цвет и размер шрифта текста этого абзаца в браузере?
Показать ответ и разборСкрыть ответ и разбор
Верный ответ
- Dфиолетовый, 12px
Разбор
Для каждого свойства побеждает самое приоритетное объявление. Для color подходят правила: p (синий), .box p (зелёный), p.note (красный), .box .note с !important (фиолетовый) и встроенный стиль (чёрный). Объявление с !important приоритетнее обычных объявлений, включая встроенный стиль, поэтому цвет будет фиолетовым. Для font-size подходят правила: p (14px), .box p (16px), #t (20px) и встроенный стиль (12px). Здесь нет !important, а встроенный стиль приоритетнее любого селектора, в том числе селектора по идентификатору, поэтому размер будет 12px. Итог: «фиолетовый, 12px».