对比了一下W3CSchool 中针对伪类选择器 :last-child 以及 :last-of-type的描述，如下：
:last-child ?????p:last-child ?????选择属于其父元素最后一个子元素每个 <p> 元素。:last-of-type ???p:last-of-type ???选择属于其父元素的最后 <p> 元素的每个 <p> 元素。
说句老实话，在不懂这两个关系的时候，越看这两句描述，越是别扭，绕口，难懂，查阅网上资料搞懂了以后，就觉得说的还是蛮有道理的。
以一段代码为例：
<!DOCTYPE html><html><head> ???<meta charset="utf-8"> ???<title>last-child 和 last-of-type区别</title> ???<style type="text/css"> ???????p:last-child{ ???????????color: red; ???????} ???????p:last-of-type{ ???????????color: blue; ???????} ???</style></head><body> ???<div> ???????<p>第一行</p> ???????<p>第二行</p> ???????<p>第三行</p> ????????<span>我是测试行</span> ???</div> </body></html>运行的结果显示：没有任何一行显示为红色，第三行显示为蓝色。或许你可能会觉得两个选择器选中的是同一行，但是当你注释掉蓝色选择器的时候会发现，红色依然未被选中。
其实红色未被选中的原因很简单，上篇文章已经讲过，这里简单的描述一下
:last-child选择父节点最后一个子节点，并且与选择器进行匹配， 父节点div的最后一个节点是span，而匹配的选择器是p,两者不对应所以匹配不上。
而另外一个选择器
:last-of-type是从父节点的子节点中寻找最后一个与选择器相同的子节点，也就是说，这次寻找的并不是最后一个节点，而是最后一个P元素节点，所以只能找到第三行了。
(CSS):last-child与:last-of-type区别
原文地址：https://www.cnblogs.com/whbniit/p/8996987.html