当
遇上:first-child出现的问题
多层<p>相互嵌套，然后用p:first-child选择器，无法正确选择，代码：
<body>
<p>111
<p>222
<p>333</p>
</p>
</p>
</body>此时用 p:first-child{color:red;} ，只有111变为红色，为什么不是所有数字变红？
我尝试把所有<p>换为<span>或者<div>或者<code>,再换用相应的选择器，均能实现全部数字变红。
我所理解的p:first-child，可以选择到的标签必须满足2个条件：
- 元素名为p（废话）
- 该p是作为第一个子元素（无关乎父元素是哪个）
是我对 ：first-child 这个伪类理解错了，还是<p>特有的原因，导致全部数字不能变红？
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
题主问了一个有意思的问题。
稍微试验了一下，很容易从DOM结构得到:
<p><p><p></p></p></p>这样的结构会被浏览器解析为：证明p中遇到p标签会自动闭合。
在p中不能包含块级元素，比如
<p><div></div></p>同样会被解析成：
更深入一步，可以看看知乎上的问答，一个HTML规范：a 标签为什么能够包含块级元素？。
p标签是不允许嵌入p标签内.所以你的嵌入层级的 p 在浏览器看来是这样的.
结果就是: