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

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颜色，即黑色正在应用。

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

3 个答案: