nth-of-type与nth-child的区别

       今天在看bootstrap教程的时候，发现教程上提到了一个知识点是之前没有注意过的，那便是nth-of-type和nth-child。这两个都是css3中的属性。

       一开始教程上用了nth-child属性，后来又改成了nth-of-type，至于为什么改了吗，教程没有细说。小编我翻了相关资料，现将这两个属性的概念与区别总结如下。

  nth-of-child：

       它的属性就是按照所有类型标签的所谓整体队列进行排序筛选，也就是说不论你是h1，span还是p标签，使用这个属性你要遵循在DOM树中的顺序来进行操作。详情请看下文：

<style>
  p:nth-child(2),p:nth-child(7){
    color:red;
  }
</style>
<h1>标题</h1>
<p>这是锻若</p>
<p>这是锻若</p>
<span>这是span</span>
<span>这是span</span>
<span>这是span</span>
<p>这是锻若</p>

效果如下

nth-of-type:

      下面我们再来深入探讨下nth-of-type和它与nth-child的区别。

      简单来说nth-of-type会忽略其它标签的顺序而安装标签自身种类的顺序进行筛选，也就是选择的参照点并不是DOM数，而是自身。下面我们结合两个具体的例子来了解下。

<style>
  p:nth-of-type(1),p:nth-of-type(3){
    color:red;
  }
</style>
<h1>标题</h1>
<p>这是锻若</p>
<p>这是锻若</p>
<span>这是span</span>
<span>这是span</span>
<span>这是span</span>
<p>这是锻若</p>

效果如下：

这个也不难理解就是按照类型来计算，碰到一个同类型就加1，那你肯定会说既然如此那有什么好说的，关键如果像下面这样呢，如下：

.item:nth-of-type{color:red}

这种情况又是怎么个案类型法？所以今天主要是探讨这个问题。

<style>
  .item:nth-of-type(3){
    color:red;
  }
</style>
<h1>标题</h1>
<p class="item">这是锻若</p>
<p>这是锻若</p>
<span>这是span</span>
<span class="item">这是span</span>
<span class="item">这是span</span>
<p class="item">这是锻若</p>
<p class="item">这是锻若</p>
<p class="item">这是锻若</p>

效果如下：