[css selector] the difference between last-child and last-of-type

1. last-child

First find the parent element ul, then find all child elements, find the last one, judge whether it is LI, if it is, it is selected, if it is not, it is an invalid selector

    <ul>
        <li>11</li>
        <li>22</li>
        <li>33</li>
        <p>44</p>
   </ul>

ul li:last-child{
   color:red;
}

The result obtained at this time is that none of them has color, because the last one is not li, so it is invalid

2. last-of-type

First find the parent element ul, find all elements of type li, and select the last li

    <ul>
        <li>11</li>
        <li>22</li>
        <li>33</li>
        <p>44</p>
   </ul>

ul li:last-of-type{
   color:red;
}

At this time, 33 turns red