一、nth-child( ) 与 nth-of-type( )的定义与用法

nth-child(n) : 匹配父元素中的第 n 个子元素，元素类型没有限制。
nth-of-type(n) : 匹配同类型中的第n个同级兄弟元素。
n可以是一个数字，一个关键字，或者一个公式，比如：nth-child(odd) 奇数 ,nth-child(even) 偶数。

nth-child和nth-of-type的不同之处就是查找元素的方式不同。前者是查找兄弟元素中某个绝对位置的元素，后者是查找同类型元素中某个绝对位置的元素。相同之处是，两者都是找到元素之后再与前面的选择符进行匹配，这里的匹配方式是一样的。

二、举例说明 nth-of-type和nth-child的区别

1、给第一个div五个P标签，给第二个div五个H5标签，分别用nth-child(2)与nth-of-type(2),看看结果是不是一样的，都是第二个变色。

  1. <style>
  2.   p:nth-child(2){color:red;}
  3.   h5:nth-of-type(2){color:red;}
  4. </style>
  5. <body>
  6.         <div>
  7.       <p>1</p>
  8.       <p>2</p>
  9.       <p>3</p>
  10.       <p>4</p>
  11.       <p>5</p>
  12.         </div>
  13.       <div>
  14.       <h5>一</h5>
  15.       <h5>二</h5>
  16.       <h5>三</h5>
  17.       <h5>四</h5>
  18.       <h5>五</h5>
  19.         </div>
  20. </body>

结果都是第二个变色
2、现在我们对HTML代码做点改动，让他们出现一些不同，CSS样式不变。我们将第一个p元素和第一个h5元素改为h4，代码如下：

<style>
  p:nth-child(2){color:red;}
  h5:nth-of-type(2){color:red;}
</style>
<body>
        <div>
      <h4>1</h4>
      <p>2</p>
      <p>3</p>
      <p>4</p>
      <p>5</p>
        </div>
      <div>
      <h4>一</h4>
      <h5>二</h5>
      <h5>三</h5>
      <h5>四</h5>
      <h5>五</h5>
        </div>
</body>

2、三变色
3、继续改动HTML代码。我们恢复第一个p元素和第一个h5元素，将第二个p元素和第二个h5元素改为h4，样式仍保持不变

<style>
  p:nth-child(2){color:red;}
  h5:nth-of-type(2){color:red;}
</style>
<body>
        <div>
      <p>1</p>
      <h4>2</h4>
      <p>3</p>
      <p>4</p>
      <p>5</p>
        </div>
      <div>
      <h5>一</h5>
      <h4>二</h4>
      <h5>三</h5>
      <h5>四</h5>
      <h5>五</h5>
        </div>
</body>

数字没有变色，而“三”变色了

结论

nth-child 是查找一堆兄弟元素里的第二个元素，不管那元素是什么，只要它排行第二就行。

nth-of-type 是在一堆兄弟元素里找到相同HTML标记类型元素中排行第二的元素。