CSS子选择器问题答案

【问题标题】：CSS Child Selector IssueCSS子选择器问题
【发布时间】：2012-08-17 16:51:30
【问题描述】：

谁能告诉我在下面的例子中“标题”和“标题 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 元素下？

【问题讨论】：

【解决方案1】：

p 内的p 是无效标记。所以结果html是：

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

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

【讨论】：

当我把外面的P改成div的时候，看起来还是不对：jsfiddle.net/zxfNU/2
忽略我，它现在可以工作了 :)。当我只在 div#root 上选择时很好。
当然，您使用的是div > h3 选择器而不是div#root > h3
如果您注意到，</div> 结束标签之前底部的</p> 结束标签也会创建一个段落。这是传统的；更多信息请参见stackoverflow.com/questions/11570902/…
@MeshMan：在 HTML 中，p 的特殊之处在于它不能包含其他流容器（或 CSS 方面的其他块级元素）。这包括其他 p 元素。

【解决方案2】：

使用<div> 代替<p>，因为<p> 中的<p> 是无效标记。

【讨论】：

【解决方案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>

【讨论】：

【解决方案4】：

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

那是因为您不能将 p 放在另一个 p 中

@你编辑的小提琴：

现在呈现以下 HTML：

而且，由于您还将 CSS 更改为 div > h3，它仍然是红色的。

【讨论】：