当前位置: 代码迷 >> HTML/CSS >> CSS3伪种选择器:nth-child()
  详细解决方案

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

热度:404   发布时间:2012-11-10 10:48:50.0
CSS3伪类选择器:nth-child()

语法:

?

: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/