CSS3类似循环的一个伪类 :nth-child

:nth-child可以实现类似于php里的while()的循环功能，是非常方便的。我用了IE8和Chrome这两个浏览器来测试它们到底支不支持:nth-child。结果是Chrome支持，但IE8不支持。

<!--先在index.html里的body里添加个列表-->
<ul>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
    <li>Four</li>
    <li>Five</li>
    <li>Six</li>
    <li>Seven</li>
    <li>Eight</li>
    <li>Nine</li>
    <li>Ten</li>
</ul>

/*外部css样式表*/

li:nth-child(3){color:red}   /*Three变红*/
li:nth-child(3n){color:red}   /*Three，Six，Nine变红*/
li:nth-child(3n+1){color:red}
 /*
从0起算，3*0+1=1，3*1+1=4，3*2+1=7，3*3+1=10
3的倍数+1行变红。也就是 第1，4，7，10 行变红。
*/

li:nth-child(3n-1){color:red}
 /*
从0起算，3*0-1=-1，3*1-1=2，3*2-1=5，3*3-1=8
3的倍数-1行变红。由于没有-1行，所以忽略。也就是 第2，5，8行变红
*/

li:nth-child(odd){color:red}   /*奇数行变红*/
li:nth-child(even){color:red}   /*偶数行变红*/

:nth-child()的括号里面还有一些其他的选择，这里只是列举了一些。这个函数是不错，不过只可惜IE8不支持。不过这种效果也可以用javascript来实现。用哪一种方法就见仁见智了。

转载于:https://www.cnblogs.com/belearner/archive/2013/02/20/2919211.html