Почему метка P всплывает в DIV, когда содержит DIV?

Question

JSBIN

HTML

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

CSS

p div{ 
    background:#f00; 
} 

У меня странный вопрос. Когда я кодирую структуру как следующий HTML. На самом деле, агент пользователя (браузер) разобрать код на:

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

Таким образом, код КСС ineffective.you может проверить его в JSBIN .I хотят знать, что причина этого поведения, и есть ли другой похожие теги имеют такое поведение? Благодарю.

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