CSS3伪类选择器:nth-child()

每天积累一点点 2011-07-22

语法:

:nth-child(an+b)

描述:

伪类:nth-child()的参数是an+b,如果按照w3.org上的描述,写成中文, 很可能会让人头晕,再加上笔者的文笔水平有限,所以我决定避开an+b的说法,把它拆分成5种写法共5部分来说明。

第一种:简单数字序号写法

:nth-child(number)

直接匹配第number个元素。参数number必须为大于0的整数。

例子:

li:nth-child(3){background:orange;}/*把第3个LI的背景设为橙色*/

第二种:倍数写法

:nth-child(an)

匹配所有倍数为a的元素。其中参数an中的字母n不可缺省,它是倍数写法的标志,如3n、5n。

例子:

li:nth-child(3n){background:orange;}/*把第3、第6、第9、…、所有3的倍数的LI的背景设为橙色*/

原文:http://duanxin.me/articles/discuss-css3-selector-nth-child/

相关推荐