【css选择器】last-child和last-of-type区别

1. 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，所以无效

2. 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变成红色