console
<body>
<div class="wrap1">
<div>div子元素</div>
<span>span子元素</span>
<div>div子元素</div>
<span>span子元素</span>
</div>
<div class="wrap2">
<div>div子元素</div>
<span>span子元素</span>
<div>div子元素</div>
<span>span子元素</span>
</div>
<div class="wrap3">
<div>div子元素</div>
<span>span子元素</span>
<div>div子元素</div>
<span>span子元素</span>
</div>
<div class="wrap4">
<div>div子元素</div>
<div>div子元素</div>
<span>span子元素</span>
<span>span子元素</span>
</div>
<div class="wrap5">
<div>div子元素</div>
<span>span子元素</span>
<div>div子元素</div>
<span>span子元素</span>
</div>
<div class="wrap6">
<div>div子元素</div>
<span>span子元素</span>
<div>div子元素</div>
<span>span子元素</span>
</div>
</body>
body>div {
margin: 24px 0;
}
/* 选择父元素下最后一个子元素，不区分类型 */
.wrap1 :last-child {
background-color: red;
}
/* 选择父元素下最后一个子元素，不区分类型，但是因为最后一个子元素是div所以就不生效了 */
.wrap2 div:last-child {
background-color: red;
}
/* 选择父元素下最后一个子元素，不区分类型，最后一个子元素刚好是span就不生效了 */
.wrap3 span:last-child {
background-color: red;
}
/* 选择父元素下最后一个子元素，区分类型，选择的是各个类型元素最后一个子元素，这里面选的就是最后一个div和最后一个span元素 */
.wrap4 :last-of-type {
background-color: red;
}
/* 选择父元素下最后一个子元素，区分类型，只选中div的最后一个子元素 */
.wrap5 div:last-of-type {
background-color: red;
}
/* 选择父元素下最后一个子元素，区分类型，只选中span的最后一个子元素 */
.wrap6 span:last-of-type {
background-color: red;
}