具有第 n 个子项的 CSS 重复范围

Question

我正在开发一个显示 7 天观看时间的日程安排查看器。 “网格”被分解为每小时时段，因此每天有 24 个时段。这些都是同一类的所有 div。我想根据类次给背景上色。每个轮类是 8 小时，所以前 8 个 div 应该有 colorA 的背景，接下来的 8 个 colorB 和接下来的 8 个 colorC。然后该模式应重复 25-48 等(例如 25-32 colorA、33-40 colorB、41-48 colorC，然后从 colorA 重新开始)

我让它在前 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 ;
     }

谁能给我指出正确的方向？

我在这里添加了 fiddle :http://jsfiddle.net/mark2457/2YTBc/

如您所见，它在前 24 天效果很好，但不会在第 25 天回到第一种颜色

谢谢

标记

Answer 1

用 HTML 标记分隔日期怎么样？基本上有一个<div>对于每一天，包含 24 <div class='cell_class'> , 每个时隙一个。这样着色会自动重新开始。