CSS伪类选择器E:nth-child（n）和E:nth-of-type（n）的区别

E:nth-child(n)  先排序，再选择

这么说可能有点抽象，请看实例：

    <div class="box">
        <p>我是P</p>
        <span>我是span1号</span>
        <h4>我是h4</h4>
        <span>我是span2号</span>
    </div>

 /* 执行过程：先将.box中的所有子元素排序，找出第二个子元素，在判断其是否为span*/
        .box span:nth-child(2) {
            color: blue;
        }

执行结果：先将.box中的所有子元素排序，找出第二个子元素，判断其是否为span。若是span，则给效果；

反之: 将 .box span:nth-child(2) 改成  .box span:nth-child(3) 

  .box span:nth-child(3) {
            color: blue;
        }

执行结果：样式并没生效。

 这是因为  .box span:nth-child(3)先将.box中的所有元素排序，选择第3个元素后，再往回找span。这时发现第三个元素并不是span，而是h4。因此样式不会生效。 

E:nth-of-type(n)  先选择，再排序

E:nth-of-type(n)会先看前面 选择的元素，再对该元素进行排序，添加效果。

接着看例子：

 <div class="box">
        <p>我是P</p>
        <span>我是span1号</span>
        <h4>我是h4</h4>
        <span>我是span2号</span>
    </div>

  /* 执行过程：先找出.box中的span元素，再对span进行排序，找出第2个span，并对其添加效果*/
        .box span:nth-of-type(2) {
            color: blue;
        }

执行结果：.box span:nth-of-type(2)先找出.box中的span元素，再对span进行排序，找出第2个span，并对其添加效果。

     

 总结一下：E:nth-child(n) 是先排序，再选择； E:nth-of-type(n) 是先选择，再排序~