为什么在包含DIV时标记P弹出DIV？

Question

JSBIN

HTML

<p>
  <div>123</div>
</p>

CSS

p div{
  background:#f00;
}

我有一个奇怪的问题。当我将结构编码为以下HTML时。实际上，用户代理（浏览器）将代码解析为：

<p></p><div>123</div>

所以，css代码是无效的。你可以在JSBIN中查看它。我想知道这种行为的原因以及是否有其他类似的标签有这种行为？感谢。

Answer 1

这是HTML的两个功能的组合。

首先，p元素不允许包含div元素。 spec将其内容模型作为“短语内容”，不包含div个元素。

其次，p元素的结束标记是可选的。 （参见上述规范链接下的标签遗漏）

<p>    <!-- Start P element -->
<div>  <!-- Start DIV element. Implicitly end P element -->
123    <!-- Add text node -->
</div> <!-- End DIV element -->
</p>   <!-- No open P element so this is discarded by the parser -->