多层<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>特有的原因，导致全部数字不能变红？
2 回答
互换的青春
TA贡献1797条经验 获得超6个赞
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>
HUH函数
TA贡献1836条经验 获得超4个赞
题主问了一个有意思的问题。
稍微试验了一下，很容易从DOM结构得到:
<p><p><p></p></p></p>这样的结构会被浏览器解析为：
<!--生成了5个p--> <p></p> <p></p> <p></p> <p></p> <p></p>
证明p中遇到p标签会自动闭合。
在p中不能包含块级元素，比如<p><div></div></p>
同样会被解析成：
<p></p> <div></div> <p></p>
按新的 HTML 规范，已经不按 inline 和 block 来区分元素类型了。在规范中每个元素会规定如下两项：Categories、 Content Model
Categories 是改元素本身的分类，content model 规定了合法的元素的内容（子元素、文本等）类型。
- 2 回答
- 0 关注
- 677 浏览
添加回答
举报
0/150
提交
取消