Сгруппированные последовательность с помощью CSS: п-й ребенок

Question

ul,li { 
 
    display: block; 
 
    margin:0; 
 
    padding:0; 
 
    list-style:none; 
 
} 
 
li { 
 
    background: black; 
 
    color: white; 
 
    padding: 10px; 
 
} 
 
li:nth-child(2n+2) { 
 
    background: red; 
 
} 
 
li:nth-child(3n+3) { 
 
    background: green; 
 
} 
 
li:nth-child(4n+4) { 
 
    background: blue; 
 
}

<ul> 
 
    <li>one</li> 
 
    <li>two</li> 
 
    <li>three</li> 
 
    <li>four</li> 
 
    <li>five</li> 
 
    <li>six</li> 
 
    <li>seven</li> 
 
    <li>eight</li> 
 
    <li>nine</li> 
 
    <li>ten</li> 
 
    <li>eleven</li> 
 
    <li>twelve</li> 
 
</ul>

Что мне нужно:

1. черный
2. красный
3. зеленый
4. синий
5. черный
6. красный
7. зеленый
8. синий
9. ...

... Как я могу добиться этого с :nth-child?

Answer 1

дал nth-child синтаксис

:nth-child(<an-plus-b> ) 

что вам нужно перебирать с помощью 4n+b

Так,

для фона red это будет 4n+2 так, 4x0+2, 4x1+2, 4x2+2 и так далее, что дает вам элементы 2, 6, 10

для фона green будет 4n+3 так, 4x0+3, 4x1+3, 4x2+3 и так далее, что дает элементы 3, 7, 11

и для фона 'blue, это будет 4n+4 так, 4x0+4, 4x1+4, 4x2+4 и так далее, что дает элементы 4, 8, 12

остальные элементы 1, 5, 9 будут цветные black по умолчанию с учетом вашей собственности в li

ul,li { 
 
    display: block; 
 
    margin:0; 
 
    padding:0; 
 
    list-style:none; 
 
} 
 
li { 
 
    background: black; 
 
    color: white; 
 
    padding: 10px; 
 
} 
 
li:nth-child(4n+2) { 
 
    background: red; 
 
} 
 
li:nth-child(4n+3) { 
 
    background: green; 
 
} 
 
li:nth-child(4n+4) { 
 
    background: blue; 
 
}

<ul> 
 
    <li>one</li> 
 
    <li>two</li> 
 
    <li>three</li> 
 
    <li>four</li> 
 
    <li>five</li> 
 
    <li>six</li> 
 
    <li>seven</li> 
 
    <li>eight</li> 
 
    <li>nine</li> 
 
    <li>ten</li> 
 
    <li>eleven</li> 
 
    <li>twelve</li> 
 
</ul>

Answer 2

Вы можете сделать это с помощью п-го ребенка следующим

Как вы должны иметь черный для индексов 1,5 и 9 может рассматриваться 4n + 1 красный для индексов 2, 6,10 и может рассматриваться Ith 4n + 2

проверки сниппет

ul, 
 
li { 
 
    display: block; 
 
    margin: 0; 
 
    padding: 0; 
 
    list-style: none; 
 
} 
 
li { 
 
    background: black; 
 
    color: white; 
 
    padding: 10px; 
 
} 
 
li:nth-child(4n+1) { 
 
    background: black; 
 
} 
 
li:nth-child(4n+2) { 
 
    background: red; 
 
} 
 
li:nth-child(4n+3) { 
 
    background: green; 
 
} 
 
li:nth-child(4n+4) { 
 
    background: blue; 
 
}

<ul> 
 
    <li>one</li> 
 
    <li>two</li> 
 
    <li>three</li> 
 
    <li>four</li> 
 
    <li>five</li> 
 
    <li>six</li> 
 
    <li>seven</li> 
 
    <li>eight</li> 
 
    <li>nine</li> 
 
    <li>ten</li> 
 
    <li>eleven</li> 
 
    <li>twelve</li> 
 
</ul>

Надеется, что это помогает