携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第20天，点击查看活动详情
在之前的文章中，我们介绍了css3中:last-child选择器的使用场景，它仅仅在元素是同一个标签且其样式类相同的情况下才能选中最后一个元素。那么对于父元素当中，最后一个子元素和其他子元素不一致的情况下，我们可以使用css3中的:last-of-type选择器来进行列表中的相同子元素的最后一个元素的选择。
下面我们就来看一下具体的使用场景
:last-of-type
:last-of-type选择器是匹配选择父元素中特定类型的元素中的最后一个子元素，例如，p:last-of-type表示选择父元素中p类型的元素中的最后一个元素。
下面，我们来看一个例子：
<div class="sort-list">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<p>test</p>
</div>
.item {
border-bottom: 1px solid #e4e4e4;
// &:last-child {
// border-bottom: none;
// }
&:last-of-type {
border-bottom: none;
}
}
上述例子中，是一个排序列表，除了排序的前三个元素，其后面又有一个其他的元素加载进来。现在我们想要去除最后一个排序元素的底部边框，刚开始使用上面注释掉的:last-child选择器发现并不能选中第三个样式类为item的元素，这个原因可以参看之前文章中对:last-child选择器的介绍。
然后，将:last-child选择器改换成:last-of-type选择器，发现可以选中第三个样式类为item的元素，其设置的底部边框不展示的需求也生效，如下图：
那么，如果我们将<p>test</p> 元素加上一个和上面排序子元素一样的类样式，也就是换成<p class="item">test</p>，那么.item:last-of-type会选中哪个元素呢？
经测试，就算是我们将<p>test</p> 改成<p class="item">test</p>，但结果依旧和上图结果一样，第三个排序元素的底部边框不展示，所以，.item:last-of-type选择的依旧是<div class="item">3</div>而不是<p class="item">test</p>，所以即便是类样式一样，但html元素不一样，依旧不会被:last-of-type选择器选中。
