html - 为什么标签 P 包含 DIV 时弹出 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 -->