CSS nth-child 圆形样式

Question

我有 6 种颜色的序列：

• 红色

• 绿色

• 蓝色

• 青色

• 洋红色

• 黄色

而元素 1 是红色的。

元素 2 是绿色的……等等。

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

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

顺序：

• nth-child(n): 红色
• nth-child(2n)：绿色
• nth-child(3n)：蓝色
• nth-child(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)）

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

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

Answer 2

但我们知道没有用于 nth-child 的模块运算符。

是什么让您认为:nth-child 没有模数语法？

如果你想要:nth-child(<i>x</i>)，其中<i>x</i> ∈ ℤ<i><sub>a</sub></i>和<i>a</i> ∈ ℕ，那么语法是

:nth-child(<i>a</i>n + <i>b</i>)

其中<i>b</i> ∈ ℤ 是<i>x</i> 的任何代表，因此<i>b</i> &lt; <i>a</i>。

正如您在 LGSon 的回答中看到的，通常在其中一组中选择 <i>b</i>

• {0, 1, …, <i>a</i>-1}
• {-<i>a</i>, -<i>a</i>+1, …, -1}
• {-<i>a</i>+1, …, -1, 0}

注意：在这个答案中，ℤ<i><sub>a</sub></i> 表示ℤ⧸<i>a</i>ℤ，即integers modulo <i>a</i>。