Параграф игнорирует стиль из-за другого вложенного абзаца

Возможно, мои знания CSS ограничены, но я не понимаю этого:

<p style="color: green">
    <p style="color: red">This is red</p>
    This should be green. But it not.
</p>

Вторая строка будет выводиться черным цветом, игнорируя "цвет: зеленый". Зачем? Я тестировал его в Chrome 28 и Firefox 22.

Ответ 1

Вы не можете вложить абзацы.

Параграф является элементом автоматического закрытия, </p> является необязательным - любой элемент блока автоматически закрывает последний открытый <p>.

Это то, что происходит:

<p style="color: green">
</p> <!-- auto-closed paragraph -->

<p style="color: red">
    This is red
</p>

This should be green. But it not.

</p> <!-- here you have syntax error -->

Ответ 2

Вы не можете вложить <p>. Тег конца абзаца может быть опущен, если следовать следующему абзацу. Это означает, что в вашем коде первый абзац не содержит текста, второй - "Это красный". Затем есть текст "Это должно быть зеленое, но это не так". который не имеет стиля и закрывающего тега </p>, который не имеет открывающего тега.

check: http://www.w3.org/TR/html-markup/p.html

Ответ 3

Параграф не может быть вложен в другой элемент или элемент блока.

Когда ваш код отображается в браузере, он отображается как ниже:

    <p style="color: green"></p>
    <p style="color: red">
      This is red
    </p>
    This should be green. But it not.
    <p></p>

Итак, вы можете видеть, что к последнему предложению нет обертки, в результате к этому применяется по умолчанию цвет css i.e black.