使用 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 结构时，无需添加额外的标记，仅仅利用语义层和新的元素选择器就能够渲染页面元素，这样代码就变得更加易于维护了。

资源来源：http://www.ibm.com/developerworks/cn/