css实现兼容火狐、IE的LI奇偶行颜色交替方法

CSS实现兼容火狐、IE的LI奇偶行颜色交替方法

为了实现网页中列表的行颜色交替，通常需要使用CSS中的:odd和:even伪类，但是在不同的浏览器下（比如firefox和IE）这两个伪类的实现方式有所不同，因此需要针对不同的浏览器进行特别处理，以下是实现方法：

方法一：使用CSS选择器

li:nth-child(odd) { 
    background-color: #f2f2f2; 
}
li:nth-child(even) { 
    background-color: #ffffff; 
}

这种方式使用了CSS3中的nth-child选择器，能够比较好的兼容现代浏览器，但在IE6~IE8这些老旧浏览器中可能不太兼容。

方法二：使用CSS类

第二种兼容性较好的方式是在要实现颜色交替的列表元素中添加一个特殊的class样式，比如说偶数行的class为even，奇数行的class为odd，然后在CSS中针对不同的class样式设定对应的背景色即可。

HTML代码如下：

<ul>
  <li class="odd">第一行</li>
  <li class="even">第二行</li>
  <li class="odd">第三行</li>
  <li class="even">第四行</li>
  <li class="odd">第五行</li>
</ul>

CSS代码如下：

.odd {
    background-color: #f2f2f2; 
}
.even {
    background-color: #ffffff; 
}

这种方法适用于大多数浏览器，但如果要支持比较老的版本，可以在CSS代码中添加下面的CSS hack：

.odd { /* 奇数行 */
  background-color: #f2f2f2;
}

/* only for IE */
li:nth-child(odd) .odd { 
    background-color: #f2f2f2; 
}
li:nth-child(even) .odd { 
    background-color: #ffffff; 
}

/* only for firefox */
li:nth-child(odd) .even { 
    background-color: #ffffff; 
}
li:nth-child(even) .even { 
    background-color: #f2f2f2; 
}

.even { /* 偶数行 */
  background-color: #ffffff;
}

/* only for IE */
li:nth-child(odd) .even { 
    background-color: #ffffff; 
}
li:nth-child(even) .even { 
    background-color: #f2f2f2; 
}

/* only for firefox */
li:nth-child(odd) .odd { 
    background-color: #f2f2f2; 
}
li:nth-child(even) .odd { 
    background-color: #ffffff; 
}

以上是两种实现方式，其中最兼容的是使用CSS类的方式，而使用nth-child选择器方式兼容性较差，但是代码更为简单明了，可以根据实际需求选择适合的方式。