通过前几节的介绍,我们已经知道,使用nth-child选择器、nth-last-child选择器、nth-of-type选择器与nth-last-of-type选择器,我们可以对父元素中指定序号的子元素、第奇数个子元素、第偶数个子元素来单独进行样式的指定,这里我们再通过代码清单19-16所示示例,复习一下nth-child选择器的用法。在该示例中,有一个ul列表,通过nth-child选择器来指定该列表中第一个列表项目、第二个列表项目、第三个列表项目及第四个列表项目的背景色。
代码清单19-16 使用nth-child选择器指定项目背景色
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html;charset=gb2312" /> <title>使用nth-child选择器指定项目背景色</title> <style type="text/css"> li:nth-child(1) { background-color: yellow; } li:nth-child(2) { background-color: limegreen; } li:nth-child(3) { background-color: red; } li:nth-child(4) { background-color: white; } </style> </head> <body> <ul> <li>列表项目1</li> <li>列表项目2</li> <li>列表项目3</li> <li>列表项目4</li> <li>列表项目5</li> <li>列表项目6</li> <li>列表项目7</li> <li>列表项目8</li> <li>列表项目9</li> <li>列表项目10</li> <li>列表项目11</li> <li>列表项目12</li> </ul> </body> </html>
这段代码的运行结果如图19-21所示。
在图中,我们可以看见该列表中前四个列表项目的背景色已设定好,其他列表项目的背景色均未设定。现在,要讨论一个问题,如果开发者想对所有的列表项目都设定背景色,但是不采用这种一个个列表项目分别指定的方式(如果有100个列表项目的话,工作量就太大了),而是采用循环指定的方式,让剩下来的列表项目循环采用一开始已经指定好的背景色,应该怎么处理呢?
这时,仍然可以采用nth-child选择器,只需在“nth-child(n)”语句处,把参数n改成可循环的an+b的形式就可以了。a表示每次循环中共包括几种样式,b表示指定的样式在循环中所处位置。如此处是4种背景色作为一组循环,则将代码清单19-16中样式指定的代码修改成如下所示的指定方法。
<style type="text/css"> li:nth-child(4n+1) { background-color: yellow; } li:nth-child(4n+2) { background-color: limegreen; } li:nth-child(4n+3) { background-color: red; } li:nth-child(4n+4) { background-color: white; } </style>
用这段代码替代代码清单19-16中样式指定的代码,然后运行代码清单19-16,运行结果如图19-22所示。
在运行结果中,我们可以清楚地看到,所有列表项目均循环使用了开头四个列表项目中的背景色。
另外,“4n+4”的写法可略写成“4n”的形式。
因此,前面我们所说的nth-child(odd)选择器和nth-child(even)选择器实际上都可以采用如下形式进行代替。
// 所有正数下来的第奇数个子元素 <子元素>:nth-child(2n+1){ // 指定样式 } // 所有正数下来的第偶数个子元素 <子元素>:nth-child(2n+2){ // 指定样式 } // 所有倒数上去的第奇数个子元素 <子元素>:nth-last-child(2n+1){ // 指定样式 } // 所有倒数上去的第偶数个子元素 <子元素>:nth-last-child(2n+2){ // 指定样式 }