《HTML 5与CSS 3权威指南 》 （第2版·下册）——第19章 19.3.4

19.3.4 选择器：nth-of-type和nth-last-of-type

1.使用选择器nth-child和nth-last-child时会产生的问题

之前，我们介绍过将nth-child选择器与nth-last-child选择器用于某些元素时，会产生一些问题，这里我们首先来看一下究竟会产生什么问题。
在代码清单19-15中，我们给出一个HTML页面代码，在该页面中，存在一个div元素，在该div元素中，又给出几篇文章的标题与每篇文章的正文。

为了让第奇数篇文章的标题与第偶数篇文章的标题的背景色不一样，我们首先使用nth-child选择器来进行指定，指定第奇数篇文章的标题背景色为黄色，第偶数篇文章的标题背景色为浅蓝色，书写方法如下所示。

将上面这段指定样式的代码添加到如代码清单19-15所示的HTML页面中，然后在浏览器中查看该页面的运行结果，如图19-19所示。

运行结果并没有如预期的那样，让第奇数篇文章的标题背景色为黄色，第偶数篇文章的标题背景色为浅蓝色，而是所有文章的标题都变成了黄色。

这个问题的产生原因在于：nth-child选择器在计算子元素是第奇数个元素还是第偶数个元素时，是连同父元素中的所有子元素一起计算的。

换句话说，“h2:nth-child(odd)”这行代码的含义，并不是指“针对div元素中第奇数个h2子元素来使用”，而是指“当div元素中的第奇数个子元素如果是h2子元素时使用”。

所以在上面这个示例中，因为h2元素与p元素相互交错，所有h2元素都处于奇数位置，所以所有h2元素的背景色都变成了黄色，而处于偶数位置的p元素，因为没有指定第偶数个位置的子元素的背景色，所以没有发生变化。

当父元素是列表时，因为列表中只可能有列表项目一种子元素，所以不会有问题，而当父元素是div时，因为div元素中包含多种子元素，所以出现了问题。

2. 使用选择器nth-of-type和nth-last-of-type

在CSS 3中，使用nth-of-type选择器与nth-last-of-type选择器来避免这类问题的发生。使用这两个选择器时，CSS 3在计算子元素是第奇数个子元素还是第偶数个子元素时，就只针对同类型的子元素进行计算了。这两个选择器的使用方法如下所示。

把以上这段代码添加到代码清单19-15所示页面中，然后运行该页面，运行结果如图19-20所示。

另外，如果计算奇数还是偶数时需要从下往上倒过来计算，可以使用nth-last-of-type选择器来代替nth-last-child选择器，进行倒序计算。

nth-of-type选择器与nth-last-of-type选择器都是从CSS 3开始被提供，目前为止被Firefox、Safari、Google Chrome、Opera浏览器所支持，到IE 8为止，还没有获得IE浏览器的支持。

19.3.5 循环使用样式

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

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

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

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

用这段代码替代代码清单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){
//指定样式
}

19.3.6 only-child选择器

采用如下所示的方法并结合运用nth-child选择器与nth-last-child选择器，则可指定当某个父元素中只有一个子元素时才使用的样式。
<子元素>:nth-child(1)：nth-last-child(1){

//指定样式

}
接下来，我们看一个示例，该示例中有两个ul列表，一个ul列表里有几个列表项目，另一个ul列表里只有一个列表项目。在样式中指定li列表的背景色为黄色，但是由于采用了结合运用nth-child选择器与nth-last-child选择器并且将序号都设定为1的处理，所以显示出来的页面中只有拥有唯一列表项目的那个ul列表中的列表项目背景色变为黄
色。代码如代码清单19-17所示。

这段代码的运行结果如图19-23所示。

另外，可以使用only-child选择器来代替使用“nth-child(1)：nth-last-child(1)”的实现方法。如在上面这个示例中，可以将样式指定中的代码改成如下所示的指定方法。

这里可以是文字也可以是图片

读者可自行将上面示例中的样式指定代码用这段代码进行替代，然后在浏览器中重新查看运行结果。另外，也可使用only-of-type选择器来替代“nth-of-type(1):nth-last-of-type(1)”，通过结合使用nth-of-type选择器与nth-last-of-type选择器来让样式只对唯一子元素起作用。nth-of-type选择器与nth-last-of-type选择器的作用与使用方法在前文已经介绍，此处不再赘述。