1.定义
:nth-child(n) 选择器匹配父元素中的第 n 个子元素，元素类型没有限制。
n 可以是一个数字，一个关键字，或者一个公式。
2.用法(转自:https://www.cnblogs.com/knuzy/p/9154345.html)
(1)nth-child(n)：父元素下的第n个子元素，n>0，索引从1开始。不区分子元素类型。
示例:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title> :nth-child()选择器的使用</title> <style> /* 选择第4个li设置颜色 */ ul li:nth-child(4){ color: brown; } </style> </head> <body> <ul> <li>火龙果</li> <li>榴莲</li> <li>苹果</li> <li>香蕉</li> <li>桂圆</li> <li>梨子</li> <li>芒果</li> </ul> </body> </html>
效果:
(2). nth-child(odd)：父元素下的奇数子元素，等同于：nth-child(2n-1)。区分子元素类型。
/* 选择奇数个li设置样式 */ ul li:nth-child(odd){ color: brown; }
效果:
(3). ntn-child(even)：父元素下的偶数子元素，等同于：nth-child(2n)。区分子元素类型。
/* 选择偶数个li设置样式 */ ul li:nth-child(even){ color: brown; }
(4). nth-child(an+b)：父元素的an+b个子元素，区分子元素类型。
描述：a代表一个循环的大小，N是一个计数器（从0开始），以及b是偏移量。
/* 选择an+b个子元素li设置样式 */ ul li:nth-child(3n+1){ color: brown; }
效果:
(5).nth-child(n+3) 表示选择列表中的标签从第3个开始到最后（正向选择），代码如下(以下转自:https://www.cnblogs.com/cui-ting/p/11422412.html)：
ul li:nth-child(n+3) { color: brown; }
效果图:
(6).nth-child(-n+3)表示选择列表中的标签从0到3，即小于3的标签（逆向选择），代码如下：
ul li:nth-child(-n+3) { color: brown; }
效果:
(7)nth-last-child(3)表示选择列表中的倒数第3个标签，代码如下：
ul li:nth-last-child(3) { color: brown; }
效果:
(8).first-child：父元素下的第一个子元素，如果第一个子元素不是该类型，选择不到。等同于：nth-child(1)。
ul li:first-child{ color: brown; }
效果图:
(9). last-child：父元素下的最后一个子元素，如果最后一个子元素不是该类型，选择不到。
ul li:last-child{ color: brown; }
参考文章:
https://www.cnblogs.com/knuzy/p/9154345.html