CSS nth-儿童圆形造型

Question

我有6种颜色的顺序：

• 红色
• 绿色
• 蓝色
• 青色
• 洋红色
• 黄色

而元素1是红色的。

元素2是绿色…等。

该列表可以有无限数量的项目，并应保留颜色序列。

最简单的方法是使用nth-child(n%6)，但是我们知道没有针对nth-child的模块运算符。

顺序：

• N.儿童(N)：红色
• 第n-儿童(2n)：绿色
• nth-儿童(3n)：蓝色
• nth-儿童(4N)：青色
• …

不会工作，因为第8元素将是青色，但它应该是绿色。

偏移量也不起作用，因为它只适用于第一次出现的情况。

这个问题能否解决呢？

Answer 1

你可以这样做

• nth-child(6n-5)每6:th，从6-5 =1开始。
• nth-child(6n-4)每6:th，从6-4 =2开始。
• 等。
• nth-child(6n-0)对于每6:th，从6-0 =6开始(可以写为nth-child(6n))

或者像这样(更新，在这种情况下可能更合适)

• 每6:6开始nth-child(6n+1)，从1开始
• 每6:6开始nth-child(6n+2)，从2开始
• 等。
• nth-child(6n+6)每6:th，从6开始(可以写为nth-child(6n)__)

​

/* left div's */
.left div:nth-child(6n-5) {
  background: red;
}
.left div:nth-child(6n-4) {
  background: green;
}
.left div:nth-child(6n-3) {
  background: blue;
}
.left div:nth-child(6n-2) {
  background: cyan;
}
.left div:nth-child(6n-1) {
  background: magenta;
}
.left div:nth-child(6n) {
  background: yellow;  
}
/* right div's */
.right div:nth-child(6n+1) {
  background: red;
}
.right div:nth-child(6n+2) {
  background: green;
}
.right div:nth-child(6n+3) {
  background: blue;
}
.right div:nth-child(6n+4) {
  background: cyan;
}
.right div:nth-child(6n+5) {
  background: magenta;
}
.right div:nth-child(6n) {
  background: yellow;  
}

/* for this demo only */
div div:nth-child(6n) + div {
  margin-top: 15px;  
}
.left, .right {
  display: inline-block;
  width: 33%;
}

<div class="left">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
  <div>10</div>
  <div>11</div>
  <div>12</div>
  <div>13</div>
  <div>14</div>
  <div>15</div>  
</div>
<div class="right">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
  <div>10</div>
  <div>11</div>
  <div>12</div>
  <div>13</div>
  <div>14</div>
  <div>15</div>  
</div>

​