使用 nth-of-type 条纹化表格的行如果对相邻的两行使用不同的背景颜色显示，则会增加可读性，这就是我们常见的“斑马纹”样式的表格。斑马纹很重要，因为它为用户提供了可参照的水平线。这种效果最好在表现层通过 CSS 来实现。传统的做法是为表格的行添加额外的“odd”（奇）和“even”（偶）类名，并分别为“odd”和“even”类定义样式。HTML 5 标准建议开发人员避免使用那些用于定义外观的类名。如果我们不想在表格中引入额外的样式类，那就要借助于新的元素选择器，便可以轻易地实现上述功能而不必改变标记结构，进而彻底实现表现层与内容的分离。
nth-of-type 选择器可以查找某个特定类型中的第 n 个页面元素，这可以通过使用公式或关键字来实现。我们首先介绍关键字查找，因为它更容易理解，之后再详细介绍如何使用公式查找页面元素。
我们的目的是条纹化表格中的行，使相邻的两行颜色不同，那么最简单的方法就是找到所有偶数行，然后赋予其同一种背景颜色。同样，我们也可以对奇数行赋予同一种颜色。CSS3 提供了 even 和 odd 两个关键字来支持这一特定的场景。实现方式请参照清单 4
清单 4. 奇偶行背景样式1
2
3
4
5
6
7
| tr:nth-of-type(even){
background-color: #F3F3F3;
}
tr:nth-of-type(odd){
background-color: #DDDDDD;
}
|
清单 4 中的选择器实现了找到所有的偶数行，改变其背景色，然后找到所有奇数行，把它们的背景色改成另一种颜色。如此就实现了斑马条纹，而不需要额外的脚本代码，也不必在每行上加入额外的类名。
在应用上面的样式之后，表格如图 3 所示：
图 3. 添加斑马纹之后的表格 接下来，我们来改变表格列的对齐方式
使用 nth-child 对齐列文本在默认情况下，表格中所有列的文本都是左对齐。下面，我们要让购物车清单中除第一列以外的所有列文本都右对齐。这样价格列和数量列因为右对齐会更加清晰，可读性增强。我们来看看如何使用 nth-child 来实现这一效果。
与 nth-of-type 类似，nth-child 选择器也是用于查找页面某元素的子元素，我们同样可以使用关键字或公式。
这里的公式就是 an+b，a 是倍数，b 是偏移量。为了方便理解，我们仍然用购物车清单为例。
如果我们想选择所有行，可以按照清单 5 这样使用选择器：
清单 5. 选择表格所有行
清单 5 中我们没有使用任何倍数，也没有使用任何偏移量。如果我们想选择除了第一行表头之外的所有行，就可以使用偏移量来实现，如清单 6：
清单 6. 选择表头之外所有行1
| table tr:nth-child(n+2)
|
如果我们想跳跃选择一些行，就可以使用倍数，如每两行选择一行用 2n：
清单 7. 每两行选择一行
如每三行选择一行则要使用 3n。
我们可以同时使用偏移量来改变起始行。如清单 8 将从表格的第四行开始每隔一行选择一行：
清单 8. 从第四行开始每隔一行选择一行1
| table tr:nth-child(2n+4)
|
这样一来，我们就可以改变购物车清单除第一列之外的其他列的文本对齐方式了：
清单 9. 第一列之外的其他列右对齐1
2
3
| td:nth-child(n+2){
text-align: right;
}
|
如此，我们的购物车清单得到了真正的改善，如图 4 所示：
图 4. 改变列对齐方式后的表格 我们接下来再对表格的最后一行进行修饰。 |
