容易误解的前端知识汇总（笔记中）_csdn前端中容易被误解的知识点-优快云博客

本文链接：https://blog.youkuaiyun.com/glodream/article/details/70207639

本文深入探讨了CSS中first-child和last-child选择器的常见误解，并介绍了如何正确使用这些选择器来定位页面元素。此外，还讲解了:nth-last-child等更高级的选择器用法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.first-child、last-child，选中第一个或最后一个元素，注意官方称父元素的第一个...，这个意味着着即便你加上“a”、“.样式”这样的选择器，他依然不理不睬。效果如下：

我们使用这个css选中最后一个a

#div1 p:last-child{background:#f00;}

元素结构如下

<div id=div1>
<p>第一个段落。</p>
<p>第二个段落。</p>
<p>第三个段落。</p>
<p>第四个段落。</p>
<p>选我p</p>
<a>选我a</a>
</div>

你会发现并非如愿，p和a在一个父亲元素下方，所以last-child会选择最后一个儿子a，而非p。

所以以后使用时就无需画蛇添足的为:last-child前加上限制性的名称了，直接#div1 :last-child{background:#f00}就得了！除非你需要确定如果最后一个元素为p才使用样式，如果不是p则不显示样式，那么可以加上p或其他限制。

如果不得不获取第几个，可以使用:nth-last-child(倒数第几个)、 nth-last-type-of(dom)、p:nth-last-child(3n+0)、p:nth-last-child(odd)、p:nth-last-child(even)。