Html 段落由于另一个嵌套段落而忽略样式

也许我的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中测试了它。

你不能嵌套段落

段落是一个自动关闭元素，

是可选的-任何块元素都将自动关闭最后打开的

事情就是这样：

<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 -->

这是红色的

这应该是绿色的。但事实并非如此。

不能嵌套

。如果一个段落后面有另一个段落，则可以省略该段落的结束标记。这意味着在代码中，第一段不包含文本，第二段包含“This is red”。然后有一些文本“这应该是绿色的，但不是。”没有样式和结束标记，没有开始标记

---

选中：

段落不能嵌套在其他段落或块元素中

在浏览器中呈现代码时，其呈现方式如下所示

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

这是红色的

这应该是绿色的。但事实并非如此。

---

因此，您可以看到，最后一句没有包装，因此默认的css颜色（即黑色）应用于该句。

还应注意，如果您在浏览器中检查了结果，则可以找到问题的根源。检查工具现在可用于所有主要浏览器。谢谢！我试着在段落中插入一个div，效果也一样。看起来段落不仅以段落结束，而且以任何块元素结束。还尝试在h1中嵌套一个h1，结果与段落相同。是的，我也尝试过，看起来是这样的-任何块元素都会关闭段落。让我更正答案。