CSS子选择器问题

Question

在下面的例子中,有谁能告诉我"Heading"和"Heading 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;
}

是不是CSS只选择一个h3元素,如果它在div下,实际上它是在p元素下？

Answer 1

pinside p是无效的标记.所以结果html是:

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

正如您所看到的,浏览器修复了错误的标记以遵循规范.

Answer 2

而不是<p>使用<div>,因为<p>内部<p>是无效的标记.