Question

我试图将不同的背景颜色应用于UL中的偶数和奇数项目。下面的代码在Safari中有效但在IE 6中没有。这是IE6中的限制还是CSS代码不正确？

ul#caseStudies {   
float: left;   
list-style: none;   
margin: 0;   
width: 100%;
}
ul#caseStudies li {   
border: 1px solid #999;   
float: left;   
margin: 0 10px 10px 0;   
width: 100px;   
}  

ul#caseStudies li:nth-child(even) {background: #CCC;}
ul#caseStudies li:nth-child(odd) {background: #C9C;}
</style>


<ul id="caseStudies">
    <li>1</li>
    <li>2</li>
</ul>

Answer 1

IE6不支持:nth-child伪元素。如果您需要支持该浏览器，您需要：

使用odd类对某些列表项进行不同的样式设置;或
使用Javascript。

作为（2）的一个例子，这在jQuery中是微不足道的：

$("#caseStudies > li:nth-child(odd)").addClass("odd");

Answer 2

第n个孩子是 css3 selector ，IE不支持。

看看

CSS contents and browser compatibility

对偶数和奇数列表项使用两个类，然后应用样式。

Answer 3

在这个时刻，支持IE6浏览器可能不再值得你精力充沛，让可怜的东西已经死了。您担心超过10％的可能用户。

Answer 4

是

IE6不支持此:nth-child

ul#caseStudies li:nth-child(even) {background: #CCC;}
ul#caseStudies li:nth-child(odd) {background: #C9C;}

li：无论对IE不起作用，

仅支持<a>

a:hover, a:active, a:visited

使用JQuery代替或者为IE6创建奇数和偶数的2个CSS类。

Answer 5

尝试使用JS。以下代码取自quirksmode.org：

function zebraLists() {
    var lists = getElementsByTagNames('ol,ul');
    for (var i=0;i<lists.length;i++) {
        var items = lists[i].childNodes;
        if (lists[i].parentNode.className === 'floater') continue;
        var counter = 1;
        for (var j=0;j<items.length;j++) {
            if (items[j].nodeName == 'LI' && !items[j].getElementsByTagName('li').length) {
                counter++;
                if (counter % 2 == 1)
                    items[j].className = 'odd';
                else
                    items[j].className = '';
            }
        }
    }
}

这样，类名“奇数”被应用于奇数＆lt; li＆gt;列表中的元素。

将不同的背景颜色应用于<ul> </ul>中的偶数和奇数项目

5 个答案: