CSS-селекторы nth-Child

Question

У меня есть девять наборов цветовых схем, которые я хочу применить к последовательности div. Использование :nth-child(1), :nth-child(2)... работает для первых девяти, но я хотел бы, чтобы последовательность повторялась после этого, и я не могу обернуть голову вокруг (3n + 2) обозначения ... Я думаю, что понимаю, но не могу заставить его делать то, что я хочу.

Возможно ли это, или я должен просто применить класс к каждому div, когда я их записываю?

Answer 1

Если вы имеете в виду, что вам нужно применять разные правила к каждому девяти последовательным элементам, вы должны использовать эти девять селекторов:

:nth-child(9n+1)
:nth-child(9n+2)
:nth-child(9n+3)
:nth-child(9n+4)
:nth-child(9n+5)
:nth-child(9n+6)
:nth-child(9n+7)
:nth-child(9n+8)
:nth-child(9n+9) /* Or :nth-child(9n) */

Answer 2

Первые несколько лакомых кусочков:

• nth-child использует для сопоставления индексы на основе 1 (т. Е. nth-child(1) - первый, а не второй)
• n в нотации An + B - это значение итератора
• n начинается с 0 и отсчитывает
• An + B будет соответствующим индексом (я назову его i)

для получения дополнительной информации прочитайте спецификацию

Если у вас есть набор элементов, которые вы хотите сопоставить, вы должны записать их:

Пример:

1st, 10th, 19th, 28th...

В этом случае вы хотите сопоставить n с конкретными индексами

n | i
======
0 |  1
1 | 10
2 | 19
3 | 28
4 | 37
etc...

Если мы решим для An + B = i, используя n = 0,i = 1 мы можем получить значение B:

A(0) + B = 1
B = 1

Затем мы можем использовать это значение во второй подстановке, используя n = 1, i = 10:

A(1) + 1 = 10;
A = 9;

Так что мытеперь есть 9n + 1 для селектора, чтобы соответствовать 1,10,19,28,etc

Вы можете промывать и повторять для каждого отдельного выбора, но довольно скоро вы должны понимать, что повторение происходит каждые A элементов, и смещениеB elements.

_{Селектор nth-child является отличным примером из реальной жизни, где алгебра средней школы действительно полезна}