A будет красным, B — синим. Прямое правило .note перекрывает p по специфичности; оба абзаца получают собственный color, поэтому зелёный цвет родителя не наследуется.
Как каскад CSS определяет цвет двух абзацев?
A будет красным, B — синим. Прямое правило .note перекрывает p по специфичности; оба абзаца получают собственный color, поэтому зелёный цвет родителя не наследуется.
Короткий ответ
Что ответить на собеседовании
Подробный разбор
Ответ с пояснениями
Условие
Разметка: <div id="box"><p class="note">A</p><p>B</p></div>. Стили в одной таблице, без слоёв и important: #box {color:green} p {color:blue} .note {color:red}. Какой цвет у A и B?
Ответ
A будет красным, B — синим. Прямое правило .note перекрывает p по специфичности; оба абзаца получают собственный color, поэтому зелёный цвет родителя не наследуется.
Высокая специфичность #box не заставляет его наследуемое значение победить собственное правило p. Сначала для элемента определяется каскад его деклараций; наследование применяется, если собственного итогового значения нет. Если убрать правило p, второй абзац станет зелёным, а первый останется красным благодаря .note.