last-child
先找到父元素ul,然后找到所有的子元素,找到最后一个,判断是不是LI,是就是选中,不是就是无效选择器
<ul>
<li>11</li>
<li>22</li>
<li>33</li>
<p>44</p>
</ul>
ul li:last-child{
color:red;
}
此时得到的结果就是哪个都没有颜色,因为最后一个不是li,所以无效
![](https://img-blog.csdnimg.cn/img_convert/53a177676c297086db285c38986fc1ca.png)
last-of-type
先找到父元素ul,找到所有的类型为li的元素,选中最后一个li
<ul>
<li>11</li>
<li>22</li>
<li>33</li>
<p>44</p>
</ul>
ul li:last-of-type{
color:red;
}
此时就是33变成红色
![](https://img-blog.csdnimg.cn/img_convert/629a1806940579f6ac5bc57603559fab.png)