4

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

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

4

4 回答 4

5

pinsidep不是有效的标记。所以结果html是：

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

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

于 2012-08-22T09:34:32.763 回答
5

而不是<p>use <div>，因为<p>inside<p>不是有效的标记。

于 2012-08-22T09:36:32.877 回答
0

这是因为 ap 标签内的 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>
于 2012-08-22T09:37:11.650 回答
0

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

在此处输入图像描述

那是因为你不能把一个p放在另一个里面p

@您编辑的小提琴：

现在呈现以下 HTML：

在此处输入图像描述

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

于 2012-08-22T09:37:31.947 回答