模 css nth-child

Question

我想找到一种方法来按照模式向 div 显示一些颜色。

我发现了一个使用模数的技巧，但它似乎不适用于 CSS...

所以，如下面的 codepen 示例：

• 蓝色背景属性应应用于 1,8,13,20,25... 块 -> 我们可以看到每个状态之间的差异是：7 然后 5 然后 7 然后 5 ...

• 绿色背景属性应应用于 4,9,16,21... 块 -> 我们可以看到每个状态之间的差异是：5 然后 7 然后 5 然后 7 ...

• 橙色背景属性应应用于 5,12,17,24... 块 -> 我们可以看到每个状态之间的差异是：7 然后 5 然后 7 然后 5 ...（就像蓝色一样）

我尝试使用 nth-child，但我的数学不是很好。 请问有什么办法吗？

http://codepen.io/anon/pen/QjyaRB

 <div class="blue">blue</div>
  <div class="white">white</div>
  <div class="white">white</div>
  <div class="green">green</div>
  <div class="orange">orange</div>

  <div class="white">white</div>
  <div class="white">white</div>
  <div class="blue">blue</div>
  <div class="green">green</div>
  <div class="white">white</div>
  <div class="white">white</div>
  <div class="orange">orange</div>

  <div class="blue">blue</div>
  <div class="white">white</div>
  <div class="white">white</div>
  <div class="green">green</div>
  <div class="orange">orange</div>

  <div class="white">white</div>
  <div class="white">white</div>
  <div class="blue">blue</div>
  <div class="green">green</div>
  <div class="white">white</div>
  <div class="white">white</div>
  <div class="orange">orange</div>

Answer 1

如here 所述，:nth-child() 不支持模运算。也就是说，这个问题仍然可以使用:nth-child() 来解决。

我们可以看到每个状态之间的差异是：7 然后 5 然后 7 然后 5 ...

5 和 7 之和为 12。本质上，您所拥有的是两个间隔为 12 的序列，只是起点略有不同，因此每两个点之间的差值在 5 和 7 之间交替变化。这是一个图表告诉你我的意思：

|---------------- 12 ----------------|--------------- 12 --| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |------------------12-----------------| |--------- 7 --------|------ 5 ------|--------- 7 ------ --|------ 5 -----|

考虑到这一点，对于以 1 后跟 8 开头的序列，请使用 div:nth-child(12n+1) 和 div:nth-child(12n+8)。其他序列也是如此。

因此：

div {
  height: 40px;
}

/* 1, 8, 13, 20, 25... */
div:nth-child(12n+1),
div:nth-child(12n+8) {
  background-color: blue;
}

/* 4, 9, 16, 21... */
div:nth-child(12n+4),
div:nth-child(12n+9) {
  background-color: green;
}

/* 5, 12, 17, 24... */
div:nth-child(12n+5),
/* Note: 12n+12, 12n+0, and 12n are all equivalent */
div:nth-child(12n+12) {
  background-color: orange;
}

<div class="blue">blue</div>
<div class="white">white</div>
<div class="white">white</div>
<div class="green">green</div>
<div class="orange">orange</div>

<div class="white">white</div>
<div class="white">white</div>
<div class="blue">blue</div>
<div class="green">green</div>
<div class="white">white</div>
<div class="white">white</div>
<div class="orange">orange</div>

<div class="blue">blue</div>
<div class="white">white</div>
<div class="white">white</div>
<div class="green">green</div>
<div class="orange">orange</div>

<div class="white">white</div>
<div class="white">white</div>
<div class="blue">blue</div>
<div class="green">green</div>
<div class="white">white</div>
<div class="white">white</div>
<div class="orange">orange</div>