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

but we know that there's no module operator for nth-child.

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

如果你想要 :nth-child(x)，其中 x∈ℤa和a∈ℕ ，则语法为

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

其中 b ∈ ℤ 是 x[ 的任意代表=61=] 这样 <code>b < a.

正如您在 LGSon 的回答中看到的那样，通常 b 会在其中一组中被选择

{0, 1, …, a-1}
{-a, -a+1, …, -1}
{-a+1, …, -1, 0}

注意：在这个答案中，ℤa表示ℤ ⧸aℤ，即integers modulo a.

CSS nth-child 圆形样式

CSS nth-child circular styling

css

sequence

css-selectors