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,所以无效
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变成红色