css3新增的伪类，nth-child() 与 nth-of-type()

新增伪类

1. elem:nth-child(n) 选中父元素下的第n个子元素，n可以接受具体的数
   值，也可以接受函数。
2. elem:nth-last-child(n) 作用同上，不过是从后开始查找。
3. elem:last-child 选中最后一个子元素。
4. elem:only-child 如果elem是父元素下唯一的子元素，则选中之。
5. elem:nth-of-type(n) 选择器匹配属于父元素的 特定类型(必须为标签类型，如 div、p、span) 的第 n 个子元素的每个元素。
6. elem:first-of-type 选中父元素下第一个elem类型元素。
7. elem:last-of-type 选中父元素下最后一个elem类型元素。
8. elem:only-of-type 如果父元素下的子元素只有一个elem类型元素，则选中该元素。
9. elem:empty 选中不包含子元素和内容的elem类型元素。
10. elem:target 选择当前活动的elem元素。
11. :not(elem) 选择非elem元素的每个元素。
12. :enabled 控制表单控件的禁用状态。
13. :disabled 控制表单控件的禁用状态。
14. :checked 单选框或复选框被选中。

---

举例详解

1. nth-child

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

  

      
1
      
2
      
3
      
4
      
5
      
6
      
7
      
8
  

给类名为 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浅析