nth-child()和nth-of-type的区别

1. ul li:nth-child(1)是先找到第一个元素,然后再把元素与前面的li相比对看类型是否一致。

ul li:nth-child(1){
        color: red;
        }
 <ul>
        <p>222</p>
        <li class="lx">1</li>
        <li class="lx">2</li>
        <li class="lx">3</li>
        <li class="lx">4</li>
        <li class="lx">5</li>
 </ul>

因为第一个元素不是li元素，不匹配所以不变红

2.ul li:nth-child(3)先找到第三个元素，看是不是li类型的，若是则变红，若不是则不变红。p算是第一个元素开始。 

 ul li:nth-child(3){
        color: red;
    }
 <ul>
        <p>222</p>
        <li class="lx">1</li>
        <li class="lx">2</li>
        <li class="lx">3</li>
        <li class="lx">4</li>
        <li class="lx">5</li>
 </ul>

3. ul .lx:nth-of-type(2)先将元素分类，然后分别按照元素去找第几个元素，分别找到之后再对比元素类型是否一致。 

ul .lx:nth-of-type(2)
 <ul>
        <p>2222</p>
        <li class="lx">11</li>
        <li class="lx">22</li>
        <li class="lx">33</li>
        <li class="lxx">44</li>
        <li class="lxx">55</li>
        <p class="lx">66</p>
        <p class="lx">77</p>
        <p class="lx">88</p>
 </ul>

p的第二个元素类名是lx所以匹配，li的第二个元素类名也是lx所以匹配，变蓝。

4.ul .lx:nth-of-type(1)由于第一个p没有lx类不匹配所以不变蓝。

 ul.type .lx:nth-of-type(1){
        color: blue;
        }
<ul class="type">
        <p>2222</p>
        <li class="lx">11</li>
        <li class="lx">22</li>
        <li class="lx">33</li>
        <li class="lxx">44</li>
        <li class="lxx">55</li>
        <p class="lx">66</p>
        <p class="lx">77</p>
        <p class="lx">88</p>
</ul>