完全理解nth-child和nth-of-type的区别。

最近又有些天没写博客了，主要写一篇下来，太浪费时间了，其实这不是根本，根本是最近比较忙，忙什么呢？最近发现一个问题以为学习速度太慢了，时间却是花的不少，但大部分时间都花在无心义的事情上，全部打算改变政策，目前已经整理出一套规范，正在测试中，好了不扯那么多，看正题。

为何要写篇呢，主要是由于以前以为本身已经理解了nth-of-type但后来发现好像和本身以前理解的不太同样，因而打算写下来。

nth-child倒很好理解就是选择第几个，代码以下：

<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-child是根据元素的个数来计算的，尽管咱们在:nth-child前面加了p。这个没啥好说的，但nth-of-type要是不研究一下还真容易理解错，它说的是按照类型来选择，看下面这个例子。

<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>

效果以下：

能够看到这里是选中了两个的，不一样类型会被看成多类，只要符合选择器规范都会选中，额，好像有点简单哈，主要是这个例子写的太好了。就这样。仍是总结一下吧。

总结

• nth-child
  按照个数来算。

• nth-of-type 按照类型来计算，若是是class那么碰到不一样类型的，单独一类，符合条件的选中。