使用 CSS3 中的伪类渲染表格
CSS 中的伪类（pesudo class）是一种通过文档外信息或通过常规元素选择器无法表达的信息查找页面元素的方法。您可能已经使用过伪类，比如使用：hover 来改变鼠标悬停在超链接上时链接的颜色。使用 CSS3 中新的伪类可以更轻松地定位页面元素。
概述
在 Web 开发过程中，开发人员经常会通过使用 CSS 来实现页面所需的样式效果。例如：利用服务器端代码或 JavaScript 脚本生成条纹样式的表格，或为了要为多个页面元素中的一部分添加样式，不得不使用大量带有额外 class 属性的标签。
这些情况在 CSS3 出现后变得非常简单！CSS3 定义了一系列非常神奇的页面元素选择器，通过它们，这个过程将变得简单而迅速。元素选择器是一种模式，它用于辅助查找 HTML 文档中的某些页面元素，以便找出后为其添加特定的样式。我们将通过利用这些新的页面元素选择器渲染表格为例，介绍它们的功能。
CSS 中的伪类（pesudo class）是一种通过文档外信息或通过常规元素选择器无法表达的信息查找页面元素的方法。您可能已经使用过伪类，比如使用:hover 来改变鼠标悬停在超链接上时链接的颜色。使用 CSS3 中新的伪类可以更轻松地定位页面元素。
优化购物车清单样式
我们采用购物车清单为例介绍如何通过页面元素选择器来优化其样式。我们首先制作一个标准的 HTML 表格如图 1
图 1. 当前购物车使用未加入样式的 HTML 表格
这是一张标准的购物车清单，上面包含了本次订单涉及的商品名称、价格、数量、合计、总价、运输费用以及总额。清单 1 是该表格的代码。
清单 1. 未加入样式的 HTML
<table border="1"> <tr> <th>商品</th> <th>价格</th> <th>数量</th> <th>合计</th> </tr> <tr> <td>可乐</td> <td>￥3.00</td> <td>10</td> <td>￥30.00</td> </tr> <tr> <td>咖啡豆</td> <td>￥110.00</td> <td>6</td> <td>￥660.00</td> <tr> <td>雨伞</td> <td>￥10.00</td> <td>5</td> <td>￥50.00</td> </tr> <tr> <td colspan="3">总价</td> <td>￥740.00</td> </tr> <tr> <td colspan="3">运费</td> <td>￥8.00</td> </tr> <tr> <td colspan="3">总额</td> <td>￥748.00</td> </tr> </table>
首先，让我去掉难看的默认表格边框，如清单 2：
清单 2. 表格边框样式
table {
width: 600px;
border-collapse: collapse;
}
th, td {
border: none;
}
然后，为表头略加修饰，用黑色作为背景色，并使用白色的字体，如清单 3：
清单 3. 表头背景色及字体样式
th {
background-color: #000000;
color: #ffffff;
}
应用以上样式后，购物车清单如图 2 所示：
图 2. 添加基本样式后的 HTML 表格
以上我们只是简单地处理了表格的边框以及调整了间距和表头，接下来我们要开始运用伪类来渲染行和列。
使用 nth-of-type 条纹化表格的行
如果对相邻的两行使用不同的背景颜色显示，则会增加可读性，这就是我们常见的“斑马纹”样式的表格。斑马纹很重要，因为它为用户提供了可参照的水平线。这种效果最好在表现层通过 CSS 来实现。传统的做法是为表格的行添加额外的“odd”（奇）和“even”（偶）类名，并分别为“odd”和“even”类定义样式。HTML 5 标准建议开发人员避免使用那些用于定义外观的类名。如果我们不想在表格中引入额外的样式类，那就要借助于新的元素选择器，便可以轻易地实现上述功能而不必改变标记结构，进而彻底实现表现层与内容的分离。
nth-of-type 选择器可以查找某个特定类型中的第 n 个页面元素，这可以通过使用公式或关键字来实现。我们首先介绍关键字查找，因为它更容易理解，之后再详细介绍如何使用公式查找页面元素。
我们的目的是条纹化表格中的行，使相邻的两行颜色不同，那么最简单的方法就是找到所有偶数行，然后赋予其同一种背景颜色。同样，我们也可以对奇数行赋予同一种颜色。CSS3 提供了 even 和 odd 两个关键字来支持这一特定的场景。实现方式请参照清单 4
清单 4. 奇偶行背景样式
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. 选择表格所有行
table tr:nth-child(n)
清单 5 中我们没有使用任何倍数，也没有使用任何偏移量。如果我们想选择除了第一行表头之外的所有行，就可以使用偏移量来实现，如清单 6：
清单 6. 选择表头之外所有行
table tr:nth-child(n+2)
如果我们想跳跃选择一些行，就可以使用倍数，如每两行选择一行用 2n：
清单 7. 每两行选择一行
table tr:nth-child(2n)
如每三行选择一行则要使用 3n。
我们可以同时使用偏移量来改变起始行。如清单 8 将从表格的第四行开始每隔一行选择一行：
清单 8. 从第四行开始每隔一行选择一行
table tr:nth-child(2n+4)
这样一来，我们就可以改变购物车清单除第一列之外的其他列的文本对齐方式了：
清单 9. 第一列之外的其他列右对齐
td:nth-child(n+2){
text-align: right;
}
如此，我们的购物车清单得到了真正的改善，如图 4 所示：
图 4. 改变列对齐方式后的表格
我们接下来再对表格的最后一行进行修饰。
使用 last-child 加粗最后一行
Web 开发人员通常会为段落设置底边距以使页面开起来错落有致。不过，这种做法会导致一组元素的最后出现多余的底边距。例如，如果段落位于侧边栏或标注栏中，去掉最后一个段落的底边距能够减少最后一段与容器边缘之间的空间浪费。在这种情况下，last-child 是最佳选择，它的作用是获取一组元素中的最后一个子元素。我们可以利用它来去除最后一段的底边距：
清单 10. 去除最后一个段落的底边距
p{ margin-bottom: 20px; }
#sidebar p:last-child{ margin-bottom: 0; }
回到我们的购物车清单，现在的购物车清单看起来已经很漂亮了，但是我们还可以对最后一行加粗显示使其更加突出。同样可以使用 last-child 来实现。
清单 11. 加粗表格最后一行
tr:last-child{
font-weight: bolder;
}
再加粗表格的最后一列以突出合计列：
清单 12. 加粗表格最后一列
td:last-child{
font-weight: bolder;
}
最后，我们还要把汇总价格的字体放大一些，借助 last-child 选择器，我们可以找到表格的最后一个单元格，为其添加下面的样式：
清单 13. 放大最后一个单元格的字体
tr:last-child td:last-child{
font-size: 24px;
}
此时我们得到个购物车清单如图 5 所示：
图 5. 字体加粗放大后的表格
使用 nth-last-child 向前查找元素
如果我们希望把运费从商品价格中区分出来，可以使用 nth-last-child 选择器快速定位此行。在前文中我们介绍了如何使用 nth-child 和 an+b 公式来查找指定的子元素。nth-last-child 选择器的用法和 nth-child 选择器的用法几乎完全一样，唯一不同之处在于 nth-last-child 是从最后一个元素开始反方向往前查找。正因为如此，用它来查找集合中倒数第二个元素就非常简单。
为了找到运费行，我们可以使用清单 14 中的代码：
清单 14. 高亮运费行
tr:nth-last-child(2){
color: blue;
}
我们还需要对购物车清单做最后一次改进。之前，我们将除第一列之外的所有列都改为了右对齐。尽管修改后商品列和价格列看起来还不错，但是表格的最后三行看起来还是有点不太协调。我们可以把表格的最后行文本设为右对齐。借助 nth-last-child 选择器的公式，我们可以实现这个效果。
清单 15. 最后三行文本右对齐
tr:nth-last-child(-n+3){
text-align: right;
}
我们可以把它理解为一个范围选择器。我们使用 nth-last-child，使它偏移 3，意味着选择偏移元素之前的所有元素。如果使用 nth-child，则这个公式会选择从偏移开始后面的所有元素。
最终我们的购物车清单如图 6 所示：
图 6. 优化后的购物车清单
IE 的兼容方案
上面介绍的元素选择器在最新版本的 Firefox、Chrome、Safari 和 Opera 中都能被识别，但是在 IE 8.0 及之前的版本中会完全忽略它们。为此，我们需要准备一套兼容解决方案。
对于浏览器不兼容的问题，最普通而且肯定有效的解决方案就是修改底层代码。我们可以为表格中各个单元格都赋予样式。但这却是最糟糕的解决方案，这样会导致表现层和内容完全混在一起，之所以使用 CSS3 的元素选择器也正是为了尽量避免这样的问题，某天不再需要额外的标记时，去掉它们也将是一项痛苦的工作。
我们可以采用一个很棒而且简洁的工具 selectivizr,，它是一个 JavaScript 工具包，可以在 IE 6 到 IE 8 的浏览器中模仿 CSS3，而我们需要做的只是在页面中添加一些脚本。
selectivizr 库可以使用 dojo、jQuery、Prototype 或者其他 JavaScript 库，但在这里我推荐 NWMatcher 库，因为这个库对本文中使用的伪类支持的最好。
因为这是我们仅仅针对 IE 制定的兼容解决方案，所以可以把相关代码都放在一个条件分支中，使其只在用户使用 IE 浏览器时生效。
清单 16. IE 兼容解决方案
<!--[if (gte IE 6) & (lte IE 8)]> <script type="text/javascript" src="js/NWMatcher 1.2.5.js"></script> <script type="text/javascript" src="js/selectivizr.js"></script> <![endif]-->
实现的效果图如图 7 所示：
图 7. IE 浏览器中的购物车清单
用 CSS3 渲染页面元素非常简便，尤其是当我们无法改变 HTML 结构时，无需添加额外的标记，仅仅利用语义层和新的元素选择器就可以渲染页面元素，这样代码就变得更加易于维护了。
