CSS中奇數行的樣式在現代瀏覽器中可以輕松實現,但在IE瀏覽器中需要特殊處理。
一般來說,我們可以使用CSS的:odd偽類來選中奇數行,如下所示:
tr:nth-child(odd) { background-color: #eee; }
然而,在IE8及以下版本中,:nth-child偽類并不被完全支持。為了保證兼容性,我們需要用到CSS3的:nth-child偽類的替代方案——:first-child和:nth-child(2n)。
tr:first-child, tr:nth-child(2n) { background-color: #eee; }
我們使用:first-child選中第一行(即奇數行),再使用:nth-child(2n)選中偶數行,這樣就達到了和使用:odd偽類一樣的效果。
需要注意的是,:first-child和:nth-child(2n)之間的順序不能顛倒。因為若先選中偶數行再選中第一行,會導致所有行都被選中。