CSS - 基于位置伪类的交替行样式

前言

对于那些在以前需要恼人且复杂的方案来解决的问题，CSS3中的位置伪类提供了极为简单的解决方案。直到最近，为了给列表或表格中的交替行添加样式，如果能够在服务器端添加一些处理逻辑，你至少可以通过计数器来遍历列表，更坏的情况是，你甚至得手动为你的行元素编号。

 

准备工作

CSS3所提供的解决方案非常简单。首先创建带有列表元素的HTML文件。给列表元素指定类并不是必需的，因为你可能想将该样式应用到整个网站：

 

实现方式

为列表元素添加相应的CSS属性，给奇数位置的<li>元素设置基于位置信息的伪类。该伪类的属性包括背景色，以及能够显著与默认字体颜色模式区分的字体色。

该方法会自动给位于奇数位置的列表元素添加样式，十分神奇的感觉！特效呈现在下面的截图中。

可以休息一下了，一切都很简单！

 

工作原理

依据www.w3.org上的定义，伪类符号:nth-of-type（an+b）表示元素在同一元素层次下有an+b-1个兄弟节点在其之前，n在文档树中表示零或任意正整数，除此之外，元素还得有对应的父元素。
这究竟意味着什么？这就是说，只要某元素在其父元素下拥有相似的兄弟元素，你就能够使用（–n+2）这样的公式来表示兄弟元素的最后两行，或者为了简便，直接使用even或odd代表奇偶子元素，然后就可以使用CSS来对这些元素添加样式。