CSS nth-child 圆形样式

Question

我有 6 种颜色的序列：

\n\n

\n

• 红色的

\n

• 绿色的

\n

• 蓝色的

\n

• 青色

\n

• 品红

\n

• 黄色的

\n

\n\n

而元素 1 是红色的。

\n\n

元素 2 是绿色\xe2\x80\xa6 等。

\n\n

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

\n\n

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

\n\n

序列：

\n\n

\n
• 第 n 个孩子(n)：红色
\n
• 第 n 个子级(2n)：绿色
\n
• 第 n 个子级 (3n)：蓝色
\n
• 第 n 个子级 (4n)：青色
\n
• \xe2\x80\xa6
\n

\n\n

行不通，因为第八个元素是青色，但它应该是绿色。

\n\n

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

\n\n

这个问题能解决吗？

\n

Answer 1

你可以这样做

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

或像这样（已更新，在这种情况下可能更合适）

• nth-child(6n+1)每 6:th，从 1 开始
• nth-child(6n+2)每 6:th，从 2 开始
• ETC。
• 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>