css - 元素 1,6, 7,10, 13 等的第 n 个子元素

Question

我正在尝试使用第 nth-child 来定位 1,6,7,10,13 等。和一些风格。我是单独针对它们的，但这不会起作用，因为内容将自动生成。

我有 1 个大的 div，然后是 2 个小的 div，一个在另一个上面，然后下一行是相反的 2 个小的和一个大的，这将随着内容的添加而继续。

实现此目标的最佳选择是什么？

下面是我最开始使用的 css:

div:nth-child(1),div:nth-child(6),div:nth-child(7),
div:nth-child(10),div:nth-child(13){
background:#000;
}

Answer 1

I have 1 large div followed by 2 small divs one above the other then the next row is the opposite 2 small and one large and this is to continue as content is added.

所以同样的情况每 6 个元素重复一次。使用 :nth-child(an+b)，您现在知道 a=6。
为每组 6 选择 2 个元素:1 和 6(然后是 7 和 12(不是 10)、13 和 18，等等)。要选择第一个，b=1 即可。要选择第 6 个，b=0 或 b=6 都可以

这导致:

li:nth-child(6n+1),
li:nth-child(6n) {
  /* sth different */
}

Codepen: http://codepen.io/anon/pen/cypAn