《HTML 5与CSS 3 权威指南（第4版·下册）》 —16.3.5　循环使用样式

16.3.5　循环使用样式

通过前几节的介绍，我们已经知道，使用nth-child选择器、nth-last-child选择器、nth-of-type选择器与nth-last-of-type选择器，我们可以对父元素中指定序号的子元素、第奇数个子元素、第偶数个子元素来单独进行样式的指定，这里我们再通过代码清单16-16所示示例，复习一下nth-child选择器的用法。在该示例中，有一个ul列表，通过nth-child选择器来指定该列表中第一个列表项目、第二个列表项目、第三个列表项目及第四个列表项目的背景色。

代码清单16-16　使用nth-child选择器指定项目背景色

这段代码的运行结果如图16-21所示。

在图中，我们可以看见该列表中前四个列表项目的背景色已设定好，其他列表项目的背景色均未设定。现在，要讨论一个问题，如果开发者想对所有的列表项目都设定背景色，但是不采用这种一个个列表项目分别指定的方式（如果有100个列表项目的话，工作量就太大了），而是采用循环指定的方式，让剩下来的列表项目循环采用一开始已经指定好的背景色，应该怎么处理呢？

这时，仍然可以采用nth-child选择器，只需在“nth-child（n）”语句处，把参数n改成可循环的an+b的形式就可以了。a表示每次循环***包括几种样式，b表示指定的样式在循环中所处位置。如此处是4种背景色作为一组循环，则将代码清单16-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>

用这段代码替代代码清单16-16中样式指定的代码，然后运行代码清单16-16，运行结果如图16-22所示。

      图16-21　使用nth-child选择器指定项目背景色      图16-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){

// 指定样式

}