nth-child() 与 nth-of-type()

1. nth-child

:nth-child(n) 选择器匹配属于其父元素的第 n 个子元素。n 可以是数字、关键词或公式
比如下面一段结构：

  <div class="box">
      <div class="item">1</div>
      <div class="item">2</div>
      <p class="item">3</p>
      <p class="item">4</p>
      <div class="item">5</div>
      <div class="item-div">6</div>
      <div class="item-div">7</div>
      <div class="item-div">8</div>
  </div>

给类名为 item 的元素加上一个背景色：

.item:nth-child(3) {
   background-color: #f7c892;
}

2. nth-of-type

:nth-of-type(n) 选择器匹配属于父元素的 特定类型(必须为标签类型，如 div、p、span) 的第 n 个子元素的每个元素。
同样上面的例子，继续加样式：

.item:nth-of-type(2) {
   background-color: #56824b;
}

.item 所在的元素类型有 div、p，所以命中第二个 div、p 标签的类名为 item 的元素。

.item-div:nth-of-type(4) {
   background-color: #986244;
}

.item-div 所在的元素类型有 div，所以命中第四个 div 且类名为 .item-div的元素。

---

试验田：
https://jsfiddle.net/n8f05sb6/7/
参考文章：
CSS3伪类选择器nth-child和nth-of-type浅析

转载于:https://www.jianshu.com/p/cd5f944b8023