使用 last-child 加粗最后一行Web 开发人员通常会为段落设置底边距以使页面开起来错落有致。不过，这种做法会导致一组元素的最后出现多余的底边距。例如，如果段落位于侧边栏或标注栏中，去掉最后一个段落的底边距能够减少最后一段与容器边缘之间的空间浪费。在这种情况下，last-child 是最佳选择，它的作用是获取一组元素中的最后一个子元素。我们可以利用它来去除最后一段的底边距：
清单 10. 去除最后一个段落的底边距1
2
| p{ margin-bottom: 20px; }
#sidebar p:last-child{ margin-bottom: 0; }
|
回到我们的购物车清单，现在的购物车清单看起来已经很漂亮了，但是我们还可以对最后一行加粗显示使其更加突出。同样可以使用 last-child 来实现。
清单 11. 加粗表格最后一行1
2
3
| tr:last-child{
font-weight: bolder;
}
|
再加粗表格的最后一列以突出合计列：
清单 12. 加粗表格最后一列1
2
3
| td:last-child{
font-weight: bolder;
}
|
最后，我们还要把汇总价格的字体放大一些，借助 last-child 选择器，我们可以找到表格的最后一个单元格，为其添加下面的样式：
清单 13. 放大最后一个单元格的字体1
2
3
| 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. 高亮运费行1
2
3
| tr:nth-last-child(2){
color: blue;
}
|
我们还需要对购物车清单做最后一次改进。之前，我们将除第一列之外的所有列都改为了右对齐。尽管修改后商品列和价格列看起来还不错，但是表格的最后三行看起来还是有点不太协调。我们可以把表格的最后行文本设为右对齐。借助 nth-last-child 选择器的公式，我们可以实现这个效果。
清单 15. 最后三行文本右对齐1
2
3
| 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 兼容解决方案1
2
3
4
| <!--[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 结构时，无需添加额外的标记，仅仅利用语义层和新的元素选择器就可以渲染页面元素，这样代码就变得更加易于维护了。 |
