CSS3 -nth-child()伪类选择器实现奇偶行显示不同样式

CSS3的强大特性令人惊叹，但也因其实现之路的艰难而让人感叹。真正的标准只有在得到行业浏览器的广泛支持时，才能被广泛接受和应用。尽管CSS3标准已经提出多年，但真正能够完全支持她的浏览器仍然不多。面对兼容性问题，许多CSS开发者只能望洋兴叹。

具有前瞻性的我们不能停滞不前。今天，我们要深入CSS3中的一个重要特性——伪类选择器“:nth-child()”。该选择器的语法为“:nth-child(an+b)”，以其丰富的匹配模式和强大的功能而备受关注。

尽管目前只有Opera9+和Safari3+等少数浏览器能够较好地支持这一选择器，但其潜力巨大，值得我们深入研究。下面，我们将详细解读其五种常见用法。

第一种是简单数字序号写法“:nth-child(number)”。这种写法直接匹配第number个元素，其中number必须为大于0的整数。例如，“li:nth-child(3){background:orange;}”会将第三个LI元素的背景设为橙色。

第二种是倍数写法“:nth-child(an)”。这种写法匹配所有倍数为a的元素。例如，“li:nth-child(3n){background:orange;}”会将第3个、第6个、第9个等所有倍数为3的LI元素的背景设为橙色。

第三种是倍数分组匹配“:nth-child(an+b)”。这种写法先将元素进行分组，每组有a个元素，然后匹配每组中的第b个元素。例如，“li:nth-child(3n+1){background:orange;}”会匹配每三个为一组的第一个LI元素。这种写法的应用非常灵活，可以根据需要进行多种组合。

第四种是反向倍数分组匹配“:nth-child(-an+b)”。这种写法与第三种相似，但它是从第b个元素开始往回算，匹配的元素数量最多不超过b个。例如，“li:nth-child(-3n+8){background:orange;}”会匹配第8个、第5个和第2个LI元素。这种写法在处理某些特定情况时非常实用。

第五种是奇偶匹配“:nth-child(odd)”和“:nth-child(even)”。这两种写法分别匹配序号为奇数和偶数的元素。例如，“li:nth-child(odd){background:orange;}”会将所有奇数序号的LI元素的背景设为橙色。这种写法在处理交替样式时非常便捷。

“:nth-child()”选择器是CSS3中一个非常强大的工具，具有广泛的应用前景。尽管目前支持它的浏览器还不多，但随着技术的不断发展，相信这一选择器的应用会越来越广泛。让我们拭目以待其在未来的表现吧！