多层<p>相互嵌套，然后用p:first-child选择器，无法正确选择，代码：
极客观点
项目管理
HarmonyOS
<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个条件：
是我对 ：first-child 这个伪类理解错了，还是<p>特有的原因，导致全部数字不能变红？
p 标签是不允许嵌入 p 标签内.
所以你的嵌入层级的 p 在浏览器看来是这样的.
<p> // 第一个 p
<p> // 自动为第一个 p 补全关闭标签, 开始第二个 p
<p> // 自动为第二个 p 补全关闭标签, 开始第三个 p
</p> // 第三个 p 结束
</p> // 第四个 p 开始, 为其补充开始标签
</p> // 第五个 p 开始, 为其补充开始标签结果就是:
<p></p> // 只有这个满足 p:first-child
<p></p>
<p></p>
<p></p>
<p></p>2 回答950 阅读✓ 已解决
2 回答1.5k 阅读✓ 已解决
2 回答922 阅读✓ 已解决
1 回答929 阅读✓ 已解决
1 回答1.2k 阅读✓ 已解决
2 回答799 阅读
1 回答803 阅读✓ 已解决
题主问了一个有意思的问题。
稍微试验了一下，很容易从DOM结构得到:
<p><p><p></p></p></p>这样的结构会被浏览器解析为：证明p中遇到p标签会自动闭合。
在p中不能包含块级元素，比如
<p><div></div></p>同样会被解析成：
更深入一步，可以看看知乎上的问答，一个HTML规范：a 标签为什么能够包含块级元素？。