CSS: уравнение nth-child

Question

У меня есть неупорядоченный список, и каждый li составляет один элемент в макете с двумя столбцами:

col1    col2
1       2
3       4
5       6
7       8
9       10
11      12

Мне нужно иметь чередующийся фоновый цвет для каждого элемента, НО не каждый элемент в одномстолбец одинаковый.

Итак:

1,4,5,8,9,11 будет одного цвета;и 2,3,6,7,10,12 будут иметь другой цвет.

Можно ли этого достичь с помощью правила: nth-child?

Спасибо!

Answer 1

Решено!После некоторых царапин на голове:

Сначала установите стандартный цвет фона, затем используйте 4n + 4 (каждый четвертый элемент, начиная с 4-го элемента = 4,8,12 и т. Д.), А также 4n + 1 (каждый четвертый элемент, начинающийсяот 1 = 1,5,9 и т. д.).

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

Спасибо всем!

Answer 2

Создайте 4 правила, одно чередование для первого столбца, другое чередование для второго столбца.Измените цвета для каждого столбца, чтобы получить что-то вроде:

col1     col2
a        b
b        a
a        b
b        a
a        b
b        a

Попробуйте:

tr.left:nth-child(even) {background: #CCC}
tr.left:nth-child(odd) {background: #FFF}
tr.right:nth-child(even) {background: #FFF}
tr.right:nth-child(odd) {background: #CCC}

Где строки в левом столбце имеют класс left и строкив правом столбце есть класс right.

Answer 3

Вы можете использовать тип ": even" и ": odd", чтобы получить эту вещь.

$('ul li:even').css('background-color','color');

$('ul li:odd').css('background-color','color');

Вы можете только nth-child для одного "li". Пожалуйста, попробуйте выше.