模数css nth-child [英] Modulo css nth-child

问题描述

我想找到一种在图案后显示一些颜色以div的方法.

I would like to find a way to display some colors to div following a pattern.

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

I found a trick using modulo but it doesn't seems to work with CSS...

因此，如下面的代码笔示例所示:

So, as in the codepen example below:

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

• the blue background property should be apply on the 1,8,13,20,25... block -> We can see that the diff between each states are : 7 then 5 then 7 then 5 ...

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

the green background property should be apply on the 4,9,16,21... block -> We can see that the diff between each states are : 5 then 7 then 5 then 7 ...

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

the orange background property should be apply on the 5,12,17,24... block -> We can see that the diff between each states are : 7 then 5 then 7 then 5 ... ( just like the blue )

我尝试过使用nth-child，但是我的数学并不十分出色. 有什么想法吗?

I tried using nth-child but I'm not really good in maths. Any idea please?

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>

推荐答案

如上所述

As mentioned here, :nth-child() does not support modulo operations. That said, this problem can still be solved using :nth-child().

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

We can see that the diff between each states are : 7 then 5 then 7 then 5 ...

5和7的总和是12.实际上，您拥有的是两个间隔为12的序列，只是起点略有不同，因此每两个点之间的差在5和7之间交替.告诉你我的意思:

The sum of 5 and 7 is 12. What you have, essentially, are two sequences with intervals of 12, just with slightly different starting points such that the difference between every two points alternates between 5 and 7. Here's a diagram to show you what I mean:

|---------------- 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).其他序列也是如此.

With this in mind, for the sequence that starts with 1 followed by 8, use div:nth-child(12n+1) and div:nth-child(12n+8). The same follows with the other sequences.

因此:

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>

这篇关于模数css nth-child的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！