E:last-child与E:last-of-type区别
E:last-child与E:last-of-type区别属于前端实例代码，有关更多实例代码大家可以查看。
标题中两个选择器的更多用法可以参阅如下两篇文章：
（1）.CSS E:last-child 选择器一章节。
（2）.CSS E:last-of-type 选择器一章节。
两个选择器在某些场景下表现完全一致，可能造成一些困扰。
俗话说，存在即合理，虽然这话有时候经不起推敲，但是在CSS中基本就是真理。
绝对不会设计出功能完全相同的两个选择器，下面介绍一下它们之间的区别。
选择器功能简述如下：
（1）.E:last-child选择器匹配父元素下，E类型，最后一个子元素，。
（2）.E:last-of-type选择器匹配父元素下，E类型、相同类型标签元素集合中最后一个子元素。
首先给出两个选择器的区别简单总结：
E:last-child匹配的是父元素的最后一个子元素（E类型）。
而E:last-of-type匹配的是父元素下各个标签类型集合中最后一个子元素（E类型）。
看了前面的总结如果还不太清晰，不用担心，后面有详细的代码演示。
特别说明：E表示一个CSS选择器，不要误解为仅表示元素选择器。
首先看一段代码实例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>犀牛前端部落</title>
<style type="text/css">
#one li:last-child{
color:blue;
}
#two li:last-of-type{
color:blue;
}
</style>
</head>
<body>
<ul id="one">
<li>犀牛前端部落一</li>
<li>犀牛前端部落二</li>
<li>犀牛前端部落三</li>
<li>犀牛前端部落四</li>
</ul>
<ul id="two">
<li>犀牛前端部落一</li>
<li>犀牛前端部落二</li>
<li>犀牛前端部落三</li>
<li>犀牛前端部落四</li>
</ul>
</body>
</html>
代码运行效果截图如下：
上述代码中两个选择器表现完全相同，再来看一段代码实例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>犀牛前端部落</title>
<style type="text/css">
#one span:last-child{
color:blue;
}
#two span:last-of-type{
color:blue;
}
span{display:block}
h1{font-size:16px;}
</style>
</head>
<body>
<div id="one">
<p>犀牛前端部落一</p>
<span>犀牛前端部落二</span>
<span>犀牛前端部落三</span>
<h1>犀牛前端部落四</h1>
</div>
<div id="two">
<p>犀牛前端部落一</p>
<span>犀牛前端部落二</span>
<span>犀牛前端部落三</span>
<h1>犀牛前端部落四</h1>
</div>
</body>
</html>
代码运行效果截图如下：
span:last-child匹配div最后一个子元素，但最必须是span元素，所以第一个div中没有符合要求的。
span:last-of-type匹配到最后一个span元素。
上面的代码并没有完全体现出E:last-of-type选择器的功能，下面单独对其进行一下演示。
代码实例如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>犀牛前端部落</title>
<style type="text/css">
.a:last-of-type{
color:blue;
}
span,a{display:block}
h1{font-size:16px;}
</style>
</head>
<body>
<div>
<p class="a">犀牛前端部落一</p>
<span class="a">犀牛前端部落二</span>
<span>犀牛前端部落三</span>
<h1>犀牛前端部落四</h1>
<h1 class="a">犀牛前端部落四</h1>
<a>犀牛前端部落四</a>
</div>
</body>
</html>
代码运行效果截图如下：
代码分析如下：
（1）.首先使用利用class选择器匹配到所有class属性值为"a"的元素。
（2）.然后按照标签类型将匹配到元素进行分类，将每一个类别中的最后一个元素颜色设置为蓝色。
（3）.p元素只有一个，当然也算是最后一个，所以字体颜色设置为蓝色。
（4）.具有两个span元素，但是class属性值等于"a"的那个并不span元素集合的最后一个，所以匹配失败。
（5）.具有两个h1元素，class属性值为"a"的h1元素位于h1元素集合第二位，也就是最后一个，匹配成功。
最后总结如下：
E:last-child满足如下两个条件即可匹配成功：
（1）.元素被E选择器匹配。
（2）.且位于父元素的最后一位。
E:last-of-type匹配成功需要满足如下条件：
（1）.元素被E选择器匹配。
（2）.且元素位于各个标签类别集合的最后一位。
E:last-child与E:last-of-type区别，这样的场景在实际项目中还是用的比较多的，关于E:last-child与E:last-of-type区别就介绍到这了。