nth选择器也称为CSS3 结构类
平时偶尔会用到，但是记不清楚，所以整理一下便于记忆。

nth 方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
:first-child

:last-child

:nth-child()

:nth-last-child()

:nth-of-type()

:nth-last-of-type()

:first-of-type

:last-of-type

:only-child()

:only-of-type()

:empty()

:first-child

概念：选择其父元素的首个子元素的每个Element元素 

1
li:first-child 表示选取第一个标签li

:last-child

概念：指定属于其父元素的最后一个子元素的Element元素

1
li:last-child 表示选取最后一个标签li

:nth-child(n)

概念：选择器匹配属于其父级元素的第n和子元素,不论元素类型

1
2
3
4
5
li:nth-child(n + 4)选取大于等于4的标签li，其中"n"为整数
li:nth-child(-n + 4)选取小于等于4的标签li
li:nth-child(2n)选取偶数标签li
li:nth-child(2n - 1)选取奇数标签li
li:nth-child(3n + 1)自定义选取标签li，3n+1表示“隔二取一”

:nth-last-child(n)

概念：匹配属于其元素的第n个子元素的每个元素,不论元素类型,从最后一个子元素开始计数

1
2
3
li:nth-last-child(3) 选取倒数第三个标签li
li:nth-last-child(odd) 选取倒数的奇数标签li
li:nth-last-child(even) 选取倒数的偶数标签li

:nth-of-type(n)

概念：选择器匹配属于父元素的特定类型的第N个子元素的每个元素

1
li:nth-of-type(3) 在li标签中找第三个

:nth-last-of-type(n)

概念：选择器匹配属于父元素的特定类型的第N个子元素的每个元素,从最后一个开始计数

1
li:nth-last-of-type(3) 在li标签中从最后面数找第三个

:first-of-type

概念：选择器匹配属于其父元素的特定类型的首个子元素的每个元素

1
li:first-of-type 在一堆子元素中找到第一个li

:last-of-type

概念：选择器匹配属于其父元素的特定类型的最后一个子元素的每个元素

1
li:nth-last-of-type 在一堆子元素中找到最后一个li

:only-child

概念：选择器匹配属于其父元素的唯一子元素的每个元素

:only-of-child

概念：选择器匹配属于其父元素的特定类型的唯一子元素的每个元素

:only-of-type

概念：选择一个元素是它的父元素的唯一一个相同类型的子元素

1
li:only-of-type {} 找到父元素中唯一的li

:empty

概念：选择器匹配没有子元素（包括文本节点）的每个元素