关于 nth-child(n)与nth-of-type(n) 的

此篇的由来

nth-child(n)与nth-of-type(n)好像在平时使用中并没有太大的区别，至少我之前是这么想的，直到有一次……

用法与区别

其实这两个选择器的日常的使用也不是很频繁，但是有的时候的确很好用。
不如正题：
仔细看下定义就知道两者的区别了

• nth-child(n)

  :nth-child(n) 选择器匹配属于其父元素的第 N 个子元素，不论元素的类型

• nth-of-type(n)

  :nth-of-type(n) 选择器匹配属于父元素的特定类型的第 N 个子元素的每个元素

其实看到这个地方大致就差多了理解了，一个是分类筛选子集，另一个则不是
下面通过具体得例子说明两者的区别

<!-- html结构 -->
<div class="demo">
  <div>这是第一个div</div>
  <div>这是第二个div</div>
  <div>这是第三个div</div>
  <h5>这是第一个h5</h5>
  <h5>这是第二个h5</h5>
  <h5>这是第三个h5</h5>
  <p>这是第一个p</p>
  <p>这是第二个p</p>
  <p>这是第三个p</p>
</div>

1.均不采用限制元素

/* 均不采用限定元素 */
/* 设置红色背景 */
.demo :nth-child(3) {
  background: #f00;
}
/* 设置绿色背景 */
.demo :nth-of-type(2) {
  background: #0ff;
}

具体页面效果如下图

注意两者的前面都没有加限制元素，所以两个表达的意思分别是：
.demo :nth-child(3)：选择demo类的第3个子元素
.demo :nth-of-type(2)：选择demo类中每个元素类型的第二个元素，所以第二个div，第二个h5，第二个p都会被选中

2.采用限制元素

/* 均不采用限定元素 */
/* 设置红色背景 */
.demo p:nth-child(3) {
  background: #f00;
}
/* 设置绿色背景 */
.demo p:nth-of-type(2) {
  background: #0ff;
}

具体页面效果如下图

现在的情况就有意思了，来看下具体的原因：
.demo p:nth-child(3)：选择demo类的p元素且其是第3个子元素，很显然不存在这样的元素，所以选择失败，自然也就没有元素节点的背景色被设置成红色
.demo� p:nth-of-type(2)：选择demo类中的第2个p元素

总结

ele:nth-child(n)选择器简单的理解就是：
是指定的ele类型同时还是第n个子元素，满足这两个条件就可以选择到，否则就无法选择

ele:nth-of-type(n)选择器简单的理解就是：
选择父元素的第n个指定元素ele类型的子元素

// 来源于网友的解释，可能会更方便理解
筛选出id为a的div里的所有直接子元素ele，然后在筛选出的结果里，只选择第n个ele，该ele的子元素均受其影响。

有的时候，关于文字的表述的确会存在一些拗口的地方，因此建议多动手谢谢demo就一目了然了！

原创文章，转载请标明出处。