:last-child与:last-of-type的区别

讨论一下:last-child与:last-of-type之间的区别，和使用场景。加强记忆。

工具/原料

sublime

浏览器

背景

在做列表的时候，会经常遇到最后一个元素与其他元素在样式上会有差异的情况。

如果是单纯的静态页面，可以使用class去控制。也可以在页面渲染结束之后，使用js去控制。若对于兼容性的要求并非那么严格，可以使用css去控制。个人建议使用css控制。

然而，就在这种情况下，我遇到了一个问题，就是:last-child与:last-of-child经常搞混，不知什么情况下使用哪个。

为了解决这个一直困扰我的问题，我查了一下CSS手册。

:last-child

关于:last-child手册中是这么解释的：

The :last-child CSS pseudo-class represents the last element among a group of sibling elements.

CSS伪类 :last-child 代表在一群兄弟元素中的最后一个元素。

举个栗子：:last-of-type

关于:last-of-type手册中是这么解释的：

The :last-of-type CSS pseudo-class represents the last element of its type among a group of sibling elements.

CSS伪类:last-of-type代表在一群兄弟元素中的最后一个指定类型的元素。

直接用上面两个栗子。

没有干扰元素，OK。结尾

总结了一番，对于什么场景下使用:last-child和:last-of-type又了相应的认识，以后犯错的可能性就会降低了很多。