在看行内级盒模型的时候,突然发现:last-child这个伪类选择器在body下的直接子元素不生效
span:first-child{
background-color: pink;
}
span:last-child{
background-color: red;
}
<body>
<span class="list">盒模型盒模型盒模型</span>
<span class="item">盒模型盒模型盒模型</span>
</body>
MDN上关于这个伪类选择器:
:last-child CSS 伪类 代表父元素的最后一个子元素。
我当时想是不是span元素也是第一个子元素所以:last-child选择器选不中不生效
然后我看MDN上讲:last-child选择器用的例子是无序列表选中最后一个子元素li
我包了层div
<div>
<span>盒模型盒模型盒模型</span>
<span>盒模型盒模型盒模型</span>
</div>
结果
按照我上面的思考就不成立了,span也是第一个子元素,怎么这次就选中了
望解答为何body作为父元素下那种情况:last-child选不中最后一个span,而div作为父元素可以
你可以试试获取body和div的nodeList数组
然后打印出来,会发现span不是body最后的节点