CSS选择器：nth-child()

CSS3 :nth-child() 选择器

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

n 可以是数字、关键词或公式。

Odd 和 even 是可用于匹配下标是奇数或偶数的子元素的关键词（第一个子元素的下标是 1）。

使用公式 (an + b)。描述：表示周期的长度，n 是计数器（从 0 开始），b 是偏移值。

选择第N个元素 :nth-child(n)

/*选择第5个*/
li:nth-child(5){background:#ccc;}

选择奇数 :nth-child(odd) 或 :nth-child(2n+1)

li:nth-child(odd){background:#ccc;}
li:nth-child(2n+1){background:#ccc;}

选择偶数 :nth-child(even) 或 :nth-child(2n) 或者 :nth-child(2n+2)

li:nth-child(even){background:#ccc;}
li:nth-child(2n){background:#ccc;}
li:nth-child(2n+2){background:#ccc;}

使用公式 :nth-child(an + b) 、 :nth-child(an - b)

a代表一个循环的大小，N是一个计数器（从0开始），以及b是偏移量（+从开始向后偏移、 -从最后向前偏移）。

/*每3个分为一组，选择3的倍数中的第1个*/
li:nth-child(3n+1){background:#ccc;}

/*每3个分为一组，选择3个倍数的前一个即 3-1 6-1 9-1*/
li:nth-child(3n-1){background:#ccc;}

公式拓展：范围（从前向后） :nth-child(n+b) b为开始位置

/*从第3位开始到结束所有*/
li:nth-child(n+3){background:#ccc;}

公式拓展：范围（从后向前）nth-child(-n+b) b为开始位置

/*第6位(包括6)前所有位置*/
li:nth-child(-n+6){background:#ccc;}

公式拓展：范围（区间）li:nth-child(n+b):nth-child(-n+b) b为开始vs结束位置

/*从第4位开始到第8位区间*/
li:nth-child(n+4):nth-child(-n+8){background:#ccc;}

公式拓展：更多组合 li:nth-child(n+b):nth-child(n):nth-child(-n+b)

/*从第2位到第9位的奇数位置*/
li:nth-child(n+2):nth-child(odd):nth-child(-n+9){background:#ccc;}

/*
li:nth-child(8n) 8个位一组循环
li:nth-child(n+7):nth-child(8n-1) 从第7个开始 每8个为一组循环向前偏移1*/
li:nth-child(8n),li:nth-child(n+7):nth-child(8n-1){border-bottom:1px dashed #000;margin-bottom:10px;padding-bottom:10px;}