it-swarm.com.ru

Использование CSS: чётные и нечетные псевдоклассы с элементами списка

Можно ли использовать псевдоклассы CSS для элементов списка?

Я ожидал бы, что следующее произведет список чередующихся цветов, но вместо этого я получу список синих элементов:

<html>
    <head>
        <style>
            li { color: blue }
            li:odd { color:green }
            li:even { color:red }
        </style>
    </head>
    <body>
        <ul>
            <li>ho</li>
            <li>ho</li>
            <li>ho</li>
            <li>ho</li>
            <li>ho</li>
        </ul>
    </body>
</html>
249
Armand

Демо: http://jsfiddle.net/thirtydot/K3TuN/1323/

li {
    color: black;
}
li:nth-child(odd) {
    color: #777;
}
li:nth-child(even) {
    color: blue;
}
<ul>
    <li>ho</li>
    <li>ho</li>
    <li>ho</li>
    <li>ho</li>
    <li>ho</li>
</ul>

Документация:

565
thirtydot

Проблема с вашим CSS связана с синтаксисом ваших псевдоклассов.

Четные и нечетные псевдоклассы должны быть:

li:nth-child(even) {
    color:green;
}

а также

li:nth-child(odd) {
    color:red;
}

Демо: http://jsfiddle.net/q76qS/5/

42
Kevin Gurney

Использовать этот:

li { color:blue; }
li:nth-child(odd) { color:green; }
li:nth-child(even) { color:red; }

Информацию о поддержке браузера смотрите здесь: http://kimblim.dk/css-tests/selectors/

18
Dan S

li:nth-child(1n) { color:green; }
li:nth-child(2n) { color:red; }
<ul>
  <li>list element 1</li>
  <li>list element 2</li>
  <li>list element 3</li>
  <li>list element 4</li>
</ul>

Смотрите поддержку браузера здесь: CSS3: nth-child () Селектор

3
iDaniel88

css нечетный и четный не поддерживается IE . рекомендуем использовать решение ниже. 

Лучшее решение:

li:nth-child(2n+1) { color:green; } // for odd
li:nth-child(2n+2) { color:red; } // for even

li:nth-child(1n) { color:green; }
li:nth-child(2n) { color:red; }
<ul>
  <li>list element 1</li>
  <li>list element 2</li>
  <li>list element 3</li>
  <li>list element 4</li>
</ul>
0
Minh_Bu

но он не работает в IE . рекомендуем использовать : nth-child (2n + 1) : nth-child (2n + 2)

li {
    color: black;
}
li:nth-child(odd) {
    color: #777;
}
li:nth-child(even) {
    color: blue;
}
<ul>
    <li>ho</li>
    <li>ho</li>
    <li>ho</li>
    <li>ho</li>
    <li>ho</li>
</ul>

0
Minh_Bu