last-child
select:last-child所指的是元素是容器的最后一个子元素，且满足select条件。
（感觉W3C的说明：选择器匹配属于其父元素的最后一个子元素的每个元素。说的不太直观，难理解）；
<style>
p:last-child {
background-color: aquamarine;
}
</style>
<div class="my_last_child">
<p>1</p>
<p>2</p>
<p>3</p>
<div>555</div>
<p>4</p>
</div>
1.要有父容器包裹，如直接
body充当父容器，者无效
<style>
p:last-child {
background-color: aquamarine;
}
</style>
<body>
<p>1</p>
<p>2</p>
<p>3</p>
<div>555</div>
<p>4</p>
</body>
2.最后一个元素不是选择器类型的，则无效
<div class="my_last_child">
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<div>555</div>
</div>
总结
select:last-child: 选择父元素的最后一个子元素。要有父容器包裹的一组子元素，且同时满足select条件的，两者都要满足。
last-of-type
select:last-of-type 选择器匹配属于其父元素的特定类型的最后一个子元素。
<style>
p:last-of-type {
background-color: aquamarine;
}
</style>
<body>
<p>1</p>
<p>2</p>
<p>3</p>
<div>555</div>
<p>4</p>
<div>666</div>
</body>
和
last-child不同，last-of-type是指定特定类型的元素，所以无需是父容器的最后一个元素，只要是父容器内，符合select条件的最后一个元素即可。而且body可以为父容器。
备注
first-child和first-of-type,类似。运行环境是Chrome浏览器
网友评论