使用 CSS3 中的伪类渲染表格（1）

look_w

概述在 Web 开发过程中，开发人员经常会通过使用 CSS 来实现页面所需的样式效果。例如：利用服务器端代码或 JavaScript 脚本生成条纹样式的表格，或为了要为多个页面元素中的一部分添加样式，不得不使用大量带有额外 class 属性的标签。
这些情况在 CSS3 出现后变得非常简单！CSS3 定义了一系列非常神奇的页面元素选择器，通过它们，这个过程将变得简单而迅速。元素选择器是一种模式，它用于辅助查找 HTML 文档中的某些页面元素，以便找出后为其添加特定的样式。我们将通过利用这些新的页面元素选择器渲染表格为例，介绍它们的功能。
CSS 中的伪类（pesudo class）是一种通过文档外信息或通过常规元素选择器无法表达的信息查找页面元素的方法。您可能已经使用过伪类，比如使用:hover 来改变鼠标悬停在超链接上时链接的颜色。使用 CSS3 中新的伪类可以更轻松地定位页面元素。
优化购物车清单样式我们采用购物车清单为例介绍如何通过页面元素选择器来优化其样式。我们首先制作一个标准的 HTML 表格如图 1
图 1. 当前购物车使用未加入样式的 HTML 表格这是一张标准的购物车清单，上面包含了本次订单涉及的商品名称、价格、数量、合计、总价、运输费用以及总额。清单 1 是该表格的代码。
清单 1. 未加入样式的 HTML

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37

<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. 表格边框样式

1 2 3 4 5 6 7 8

table { width: 600px; border-collapse: collapse; } th, td { border: none; }

然后，为表头略加修饰，用黑色作为背景色，并使用白色的字体，如清单 3：
清单 3. 表头背景色及字体样式

1 2 3 4

th { background-color: #000000; color: #ffffff; }

应用以上样式后，购物车清单如图 2 所示：
图 2. 添加基本样式后的 HTML 表格以上我们只是简单地处理了表格的边框以及调整了间距和表头，接下来我们要开始运用伪类来渲染行和列。