Выберите удваивается с помощью nth-child () в CSS3

Question

Скажем, у меня есть следующая структура списка:

<ul>
    <li></li><li></li>
    <li></li><li></li>
</ul>

и каждый <li> имеет ширину 50%, поэтому я хочу, чтобы каждые два имели один и тот же цвет фона, как этот:

<ul>
    <li style="background:#CCC;"></li><li style="background:#CCC;"></li>
    <li style="background:#DDD;"></li><li style="background:#DDD;"></li>
    <li style="background:#CCC;"></li><li style="background:#CCC;"></li>
    <li style="background:#DDD;"></li><li style="background:#DDD;"></li>
</ul>

Могу ли я сделать это с помощью CSS-селектора nth-child (), чтобы свернул код ?

Answer 1

ul li:nth-child(4n+1),
ul li:nth-child(4n+2) {
  background: #CCC;
}
ul li:nth-child(4n+3),
ul li:nth-child(4n+4) {
  background: #DDD;
}

Это даст вам каждый 4-й элемент, начиная с 1-го и 2-го, как цвет #CCC и каждый 4-й элемент, начиная с 3-го и 4-го, как # DDD

jsfiddle здесь: http://jsfiddle.net/mU2tn/1/

Answer 2

Я считаю, что этот CSS должен получить то, на что вы нацелены.

ul li:nth-child(4n+1), ul li:nth-child(4n+2) {
    background: #ccc;
}

ul li:nth-child(4n+3), ul li:nth-child(4n){
    background: #ddd;
}

Этот JSFiddle показывает это в действии.http://jsfiddle.net/u2W84/

Answer 3

Да, вы можете сделать это только с помощью CSS (3).Вот пример jsFiddle .

li {
    width:100%;
}
li:nth-child(4n) {
    background:#999;
}
li:nth-child(4n-1) {
    background:#999;
}
li:nth-child(4n-2) {
    background:#ccc;
}
li:nth-child(4n-3) {
    background:#ccc;
}

Answer 4

li{
   /* All LIs*/
}
li:nth-child(4n+1),
li:nth-child(4n+2) {
   /* Li 1, 2,
         5, 6,
         9, 10 */
}

Answer 5

Возможно, все остальные ответы сработают, но вот что я сделаю:

ul li {
    background: red;
}

ul li:nth-child(odd), 
ul li:nth-child(odd) + li {
    background: green;
}

Редактировать: нет, извините, это не сработало: P Дай мне секунду.