CSS选择器：nth-child()

CSS3 :nth-child() 选择器

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

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

---

odd 和 even 是可用于匹配下标是奇数或偶数的子元素的关键词

---

使用公式 (an + b)。描述：a表示周期的长度，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是偏移量（+从开始向后偏移、 -从最后向前偏移）。

/*
:nth-child(an + b)
a代表一个循环的大小，N是一个计数器（从0开始），以及b是偏移量（+从开始向后偏移）

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

/*
:nth-child(an - b)
a代表一个循环的大小，N是一个计数器（从0开始），以及b是偏移量（-从最后向前偏移）

每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;}

  

:nth-child(n) 与 :nth-child(an + b)  、 :nth-child(an - b)组合使用

/*
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;}

CSS 选择器参考手册