html - 由于另一个嵌套段落，段落忽略样式

Question

可能我的 CSS 知识有限，但我不明白这一点:

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

第二行将呈现为黑色，忽略“颜色:绿色”。为什么？我在 Chrome 28 和 Firefox 22 中对其进行了测试。

Answer 1

不能嵌套段落。

段落是一个自动关闭元素，</p>是可选的 - 任何 block 元素都会自动关闭最后打开的 <p> .

这是正在发生的事情:

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

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

This should be green. But it's not.

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