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元素中，又给出几篇文章的标题与每篇文章的正文。
代码清单19-15 nth-of-type选择器与nth-last-of-type选择器使用示例的HTML页面
"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-of-type选择器与nth-last-of-type选择器使用示例title>
head>
<body>
<div>
<h2>文章标题Ah2>
<p>文章正文。p>
<h2>文章标题Bh2>
<p>文章正文。p>
<h2>文章标题Ch2>
<p>文章正文。p>
<h2>文章标题Dh2>
<p>文章正文。p>
div>
body>
html>
为了让第奇数篇文章的标题与第偶数篇文章的标题的背景色不一样，我们首先使用nth-child选择器来进行指定，指定第奇数篇文章的标题背景色为黄色，第偶数篇文章的标题背景色为浅蓝色，书写方法如下所示。
<style type="text/css">
h2:nth-child（odd）{
background-color: yellow;
}
h2:nth-child（even）{
background-color: skyblue;
}
style>
将上面这段指定样式的代码添加到如代码清单19-15所示的HTML页面中，然后在浏览器中查看该页面的运行结果，如图19-19所示。
图19-19 在代码清单19-15所示的HTML页面中使用nth-child选择器
运行结果并没有如预期的那样，让第奇数篇文章的标题背景色为黄色，第偶数篇文章的标题背景色为浅蓝色，而是所有文章的标题都变成了黄色。
这个问题的产生原因在于：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在计算子元素是第奇数个子元素还是第偶数个子元素时，就只针对同类型的子元素进行计算了。这两个选择器的使用方法如下所示。
<style type="text/css">
h2:nth-of-type（odd）{
background-color: yellow;
}
h2:nth-of-type（even）{
background-color: skyblue;
}
style>
把以上这段代码添加到代码清单19-15所示页面中，然后运行该页面，运行结果如图19-20所示。
图19-20 nth-of-type选择器使用示例
另外，如果计算奇数还是偶数时需要从下往上倒过来计算，可以使用nth-last-of-type选择器来代替nth-last-child选择器，进行倒序计算。
nth-of-type选择器与nth-last-of-type选择器都是从CSS 3开始被提供，目前为止被Firefox、Safari、Google Chrome、Opera浏览器所支持，到IE 8为止，还没有获得IE浏览器的支持。
相关HTML 5与CSS 3权威指南：nth-of-type和nth-last-of-type