当遇上:first-child出现的问题

多层相互嵌套，然后用p:first-child选择器，无法正确选择，代码：

<body>
    <p>111        
        <p>222            
            <p>333</p>
         </p>
    </p>
</body>

此时用 p:first-child{color:red;} ，只有111变为红色，为什么不是所有数字变红？

我尝试把所有换为或者<div>或者<code>,再换用相应的选择器，均能实现全部数字变红。

我所理解的p:first-child，可以选择到的标签必须满足2个条件：

元素名为p（废话）
该p是作为第一个子元素（无关乎父元素是哪个）

是我对 ：first-child 这个伪类理解错了，还是特有的原因，导致全部数字不能变红？

守着一只汪

浏览 678回答 2

2回答

互换的青春

p 标签是不允许嵌入 p 标签内.所以你的嵌入层级的 p 在浏览器看来是这样的. // 第一个 p     // 自动为第一个 p 补全关闭标签, 开始第二个 p        // 自动为第二个 p 补全关闭标签, 开始第三个 p        // 第三个 p 结束    // 第四个 p 开始, 为其补充开始标签 // 第五个 p 开始, 为其补充开始标签结果就是: // 只有这个满足 p:first-child

HUH函数

题主问了一个有意思的问题。稍微试验了一下，很容易从DOM结构得到:这样的结构会被浏览器解析为： 证明p中遇到p标签会自动闭合。在p中不能包含块级元素，比如<div></div>同样会被解析成： <div></div> 按新的 HTML 规范，已经不按 inline 和 block 来区分元素类型了。在规范中每个元素会规定如下两项：Categories、 Content Model Categories 是改元素本身的分类，content model 规定了合法的元素的内容（子元素、文本等）类型。

随时随地看视频慕课网APP

我要回答

当<p>遇上:first-child出现的问题

2回答