先上一段菜鸟教程中对它的用法的解释：
:last-child选择器用来匹配父元素中最后一个子元素。
我也是这么一直简单地认为的。然而这样的理解其实是不全面的。最近有遇到一个场景是选中列表中的最后一项为它添加边框。我就照着我的理解写了（错误示范）：
<ul class="container">
<li class="item">one</li>
<li class="item">two</li>
<li class="item">three</li>
</ul>
.item {
margin-bottom: 10px;
}
.container:last-child{
border: 1px solid #000000
}
本以为会选中<ul>中的最后一个<li>，结果却啥效果也没有：
经过一番搜索才明白，:last-child实际上是一个伪类。它与其他选择器搭配使用的真正过程应该是：
比如：selector:last-child
- 查找与
selector选择器匹配的所有同级元素 - 在所有同级元素中查找最后一个元素
- 检查这最后一个元素与
selector是否匹配
所以开头的场景的正确示范应该是:
.container .item:last-child {
border: 1px solid #000000;
}
达到效果：
参考文档：
www.runoob.com/cssref/sel-…
www.cnblogs.com/yzhihao/p/1…
如果感到这篇文章对你有用，麻烦点个赞~
