применение другого цвета фона к четным и нечетным элементам в <ul>

Question

Я пытаюсь применить другой цвет фона к четным и нечетным элементам в UL. Код ниже работает в Safarii, но не в IE6. Это ограничение в 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. Если вам требуется поддержка этого браузера, вам необходимо:

1. используйте класс odd для стилизации некоторых элементов списка по-разному; или
2. используйте Javascript.

В качестве примера (2) это тривиально в jQuery:

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

Answer 2

Попробуйте использовать 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 = '';
            }
        }
    }
}

Таким образом, имя класса 'odd' применяется к нечетным

элементам списка.

Answer 3

Да

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 или создайте 2 класса CSS для нечетных и четных для IE6.

Answer 4

На данном этапе, вероятно, больше не стоит вашей энергии поддерживать браузер IE6, пусть бедняжка уже умрет. Вы беспокоитесь о 10% возможных пользователей.

Answer 5

nth child является css3 селектором , и IE не поддерживает это.

Взгляните на

Содержимое CSS и совместимость с браузером

Используйте два класса для четных и нечетных элементов списка, а затем примените стиль.