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>是可选的 - 任何块元素都会自动关闭最后打开的<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>'s。如果一个段落后面跟着另一个段落，则可以省略段落的结束标记。这意味着在您的代码中，第一段不包含文本，第二段包含“这是红色的”。然后是一些文字“这应该是绿色的。但它不是。” 它没有样式和结束</p>标签，它没有开始标签。

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

Answer 3

段落不能嵌套在另一个段落或块元素中。

当您的代码在浏览器中呈现时，它呈现如下

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

所以你可以看到，最后一句话没有包装，因此默认的css颜色，即黑色被应用在上面。