Page 150 - css揭秘

22 文本行的斑马条纹

背景知识

CSS 渐变，background-size，“条纹背景”，“灵活的背景定位”

难题

几年前，在刚刚获得 :nth-child()/:nth-of-type() 伪类之后，我们
最常用其来解决的一个需求就是表格的“斑马条纹”（参见图 5-8）。这在以
前需要服务器端预先处理、客户端的脚本处理或者是纯手工写死来实现，而
1
现在只需下面这几行简单的代码就足够了：

tr:nth-child(even) {
background: rgba(0,0,0,.2);
}

图 5-8
以斑马条纹的样式来呈现表格早
已十分常见，不论是在 UI 设计
中（比如本图所示的 Mac OS X
Yosemite 文件列表），还是在平
面设计中。原因在于斑马条纹可
以帮助我们更容易地把视线保持
在一长条水平空间内

尽管如此，当我们想把表格行的这种效果应用到文本行时，仍然有些
①
力不从心 。这种效果对于提高代码段的可读性来说尤为实用。很多开发者
最终不得不使用 JavaScript 来把每行代码包裹进一个个 <div> 元素中，然后

① 很多焦头烂额的开发者甚至向 CSS 工作组申请增加 :nth-line() 这样的伪元素，不过由于
性能上的考量被拒绝了。

22 文本行的斑马条纹 119

඀ࠡ JOEC