19.3.5 循环使用样式
通过前几节的介绍，我们已经知道，使用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所示。
图19-21 使用nth-child选择器指定项目背景色则将代码清单19-16中样式指定的代码修改
在图中，我们可以看见该列表中前四个列表项目的背景色已设定好，其他列表项目的背景色均未设定。现在，要讨论一个问题，如果开发者想对所有的列表项目都设定背景色，但是不采用这种一个个列表项目分别指定的方式（如果有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所示。
图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）{
//指定样式
}
相关HTML 5与CSS 3权威指南：循环使用样式