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

CSS只有在h3元素位于div下时才会选择它，但实际上它是在p元素下面吗？

- Martin Blore

Answer 1

p标签内不能包含p标签，因此结果的 HTML 代码为：

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

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

- Sotiris

---

当我将外部的P标签改为div标签时，它仍然看起来不对：http://jsfiddle.net/zxfNU/2/ - Martin Blore

不用理我，现在它可以工作了 :). 当我只选择div#root时，它就没问题了。 - Martin Blore

当然，你正在使用 div > h3 选择器而不是 div#root > h3。 - zessx

如果你注意到，在 </div> 结束标签之前的底部的 </p> 结束标签也会创建一个段落。这是传统做法；请参考此链接以获取更多信息：https://dev59.com/Lmgu5IYBdhLWcg3wGjhF。 - BoltClock

顺便提一下，我认为P元素只是一个块级元素，这意味着它可以包含其他块级/内联元素？所有块级元素是否都有自己特定的规则，以此来决定浏览器如何处理它们？ - Martin Blore

@MeshMan：在HTML中，p是特殊的，因为它不能包含其他流容器（或CSS术语中的其他块级元素）。这包括其他p元素。 - BoltClock

Answer 2

使用 <div> 代替 <p>，因为在 <p> 标签中嵌套 <p> 标签不符合有效标记的要求。

- RDX RaN

Answer 3

这是因为在 p 标签内部使用 p 标签不是有效的 HTML 代码。 使用检查元素功能，你会发现你的 HTML 代码如下：

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

        <h3>Heading</h3>

        <h3>Heading 2</h3>

    <p></p>
</div>

<h3>Heading 3</h3>

- GajendraSinghParihar

Answer 4

查看渲染后的HTML，例如在Firebug中：

这是因为你不能把一个p标签放在另一个p标签内部。

@您编辑的fiddle：

现在呈现以下HTML：

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

- F.P