选择器一点疑惑,想想应该是没明白

新手上路,请多包涵

在看行内级盒模型的时候,突然发现: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作为父元素可以

阅读 1.6k
2 个回答

你可以试试获取body和div的nodeList数组

const body = document.querySelector('body')
const div = document.querySelector('div')

然后打印出来,会发现span不是body最后的节点

:last-child:first-child 指的是同一父节点下的兄弟节点的首个或者是最后一个,没有效果的话可能不满足这个条件,你可以试试下面的代码。

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题