Question

我正在开发一个节目查看器，显示7天的时间来查看。＆＃34;网格＆＃34;被分解为每小时一次，所以每天有24个。这些都是同一类的div。我想根据班次为背景着色。每个班次为8小时，因此前8个div应具有colorA的背景，接下来的8个colorB然后接下来的8个colorC。然后该图案应重复25-48等（例如25-32色A，33-40色B，41-48色C，然后再用色彩A重新开始）

我让它为前24个div工作，但不知道如何在24之后重新开始着色。

这是我到目前为止所拥有的：

    .cell_class:nth-child(-n+8)  {
     background-color: blue ;
     }

.cell_class:nth-child(n+8) {
     background-color: green ;
     }

 .cell_class:nth-child(n+16) {
    background-color: red ;
     border-right: 1px solid black ;
     }

有人能指出我正确的方向吗？

我在这里添加了小提琴：http://jsfiddle.net/mark2457/2YTBc/

正如你所看到的那样，它在24日之前效果很好，但在25岁时并没有包裹回第一种颜色

由于

标记

Answer 1

如何用HTML标记分隔天数？基本上每天都有<div>，包含24 <div class='cell_class'>，每个时段一个。这样，着色将自动重启。

Answer 2

你可以像尤金所说，将每个24小时的部分包裹在一个容器中一天。这可能是最好的方法。如果由于某种原因无法做到这一点，您可以随时为这些部分生成CSS。

.cell_class:nth-child(n+8){}
.cell_class:nth-child(n+16){}
.cell_class:nth-child(n+24){}
... etc.

我使用SASS创建了一个这样的例子。 http://codepen.io/davidsturgeon/pen/iaIzf

CSS与nth-child重复范围

2 个答案: