CSS nth-child 自定义模式

Question

我正在尝试为网站上的内容创建一个阻塞网格，该网格遵循如下所示的模式。它必须完全使用 CSS 配置，而不是 JavaScript!

模式:

| - - - - | => 1 x 100%
| - -|- - | => 2 x 50%
| - -|- - | => 2 x 50%
| - - - - | => 1 x 100%
| - -|- - | => 2 x 50%
| - -|- - | => 2 x 50%
| - - - - | => 1 x 100%
| - -|- - | => 2 x 50%
| - -|- - | => 2 x 50%
| - - - - | => 1 x 100%

我已经计算出 :nth-child(5n+1) 将成功地允许我设置大的全宽 block 的样式，但对于其余部分，它将在 之间交替:odd 和 :even 直到 (5n+1) 下的下一个元素出现。

有没有人对如何按照描述进行标记有任何建议？我将不胜感激。

Answer 1

看看这个快速的 fiddle :

http://jsfiddle.net/duncan/Z3Vgt/

nth-child(3n+1) 似乎可以解决问题，如果我没理解错的话。