由于另一个嵌套段落,段落忽略了样式

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>是可选的 - 任何块元素将自动关闭最后一个打开<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 -->

Answer 2

你不能窝<p>.如果段落的结尾标记后跟另一个段落,则可以省略该段落的结束标记.这意味着在您的代码中,第一段不包含文本,第二段包含"This is red".然后有一些文字"这应该是绿色的.但事实并非如此." 没有样式和结束</p>标记,没有开始标记.

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