html - CSS 子选择器问题

Question

谁能告诉我“标题”和“标题 2”在下面的示例中是如何被涂成红色的？ http://jsfiddle.net/zxfNU/1/

HTML

<div id="root">
    <p>
        <p>Test 1</p>

        <h3>Heading</h3>

        <h3>Heading 2</h3>

    </p>
</div>

<h3>Heading 3</h3>

CSS

div#root > h3
{
    color: red;
}

如果 h3 元素位于 div 下，CSS 难道不会只选择它，而实际上它位于 p 元素下吗？

Answer 1

p 中的

p 不是有效标记。所以结果 html 是:

<div id="root">
    <p></p>
    <p>Test 1</p>
    <h3>Heading</h3>       
    <h3>Heading 2</h3>
    <p></p>
</div>

如您所见，浏览器修复了错误的标记以符合规范。