Таблица стилей веб-страницы содержит правила: p { color: blue; } .note { color: red; } #main { color: green; }. Установите соответствие между описанием абзаца (тег p) и итоговым цветом его текста в браузере:
1. Абзац имеет class со значением «note» и id со значением «main», атрибута style нет
2. Абзац имеет class со значением «note», id нет, но задан атрибут style=«color: orange;»
Показать ответ и разборСкрыть ответ и разбор
Верный ответ
- 1Cзелёный
- 2Bоранжевый
Разбор
В CSS при конфликте правил побеждает более специфичное: встроенный стиль (атрибут style) приоритетнее селектора идентификатора, тот приоритетнее селектора класса, а класс приоритетнее селектора тега. Случай 1: к абзацу применимы все три правила (по тегу, по классу и по идентификатору). Самое специфичное — правило #main, поэтому текст «зелёный». Случай 2: применимы правила по тегу p и по классу .note, но встроенный стиль с color: orange переопределяет оба, поэтому текст «оранжевый».