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只在div下面选择一个h3元素，那么它实际上是在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>

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

Answer 2

而不是<p>使用<div>，因为<p>中的<p>不是有效的标记。

Answer 3

这是因为p标签内的p标签不是有效的Html 使用Inspect元素，你会发现你的html为

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

        <h3>Heading</h3>

        <h3>Heading 2</h3>

    <p></p>
</div>

<h3>Heading 3</h3>

Answer 4

查看呈现的HTML，例如在Firebug：

那是因为您无法将p置于另一个p

中

@Your编辑的小提琴：

现在呈现以下HTML：

而且，由于您还将CSS更改为div > h3，因此它仍然显示为红色。