说到last-of-type选择器，我想很多人的第一印象就是选择父元素下的特定类型的最后一个元素，我也是这样认为的，比如.node:last-of-type就是指的是选择父元素下拥有node类名的元素中的最后一个元素, MDN上也是一样的解释：
:last-of-typeCSS 伪类 表示了在（它父元素的）子元素列表中，最后一个给定类型的元素。当代码类似Parent tagName:last-of-type的作用区域包含父元素的所有子元素中的最后一个选定元素，也包括子元素的最后一个子元素并以此类推。
事情经过
然而，凡事总有一个然而，我按照这样的理解去写下了我的last-of-type选择器，页面上却一点变化都没有，demo版如下：
我的最后一个.list-item始终没有变成我心爱的小粉红，为什么呢，命名就是最后一个 list-item 元素，为什么不生效呢，由于我项目中使用的 css-modules + less，我一度怀疑是不是哪儿编译错了，导致没有生成这个样式，又去把css-modules文档研读一番，依然没发现任何错误，然后我又去百度一下，em...，百度上各种结果基本都是 w3cShool 或者 菜鸟教程 这种搬过来的示例，这里不得不吐槽下，网络上太多人各种抄袭迁移文章，搜来搜去百分之90以上的重复结果，一点个人思考都没有，唉。后来只能自己写demo不停的尝试，写了不知道多种样例，都是生效的，直到用上述demo，终于试出来了。直到这儿，才稍微有一点明白了，后面陆续试了这种DOM结构的例子，也在不同的浏览器上都尝试了，无一例外，都无法匹配到最后一个 list-item 元素。如何才能生效呢，上面这个demo只需稍微修改一下就行了：
把最后一个元素的标签由 div 改为 p 即可（只要不是div标签都行），我的小粉红成功出现。
到这儿我才终于明白这个 last-of-type 到底是什么意思：
真相大白
用大白话给各位解释下：
:last-of-type: 匹配父元素下最后一个特定类型的元素，这里的类型是指的标签类型，而不是class或者id等其他类型,通过伪类选择器前的其他选择器找到匹配元素，拿到匹配元素的 Tag, 然后判断是否是该父元素下的所有同 Tag 类型元素中的最后一个，如果是，则匹配此伪类选择器。
最后总结下，有些时候看到这种单词就会先入为主的形成一个固有印象，然后网上搜索结果也是讲的非常的浅显，像这种不算非常常用的选择器一旦遇到问题还真的挺难排查的，这篇文章就当作一个笔记吧。
