CSS第n个子自定义模式

我正在尝试为网站上的内容创建一个阻止网格，该网格遵循如下所示的模式。它必须完全配置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%

我已经计算出，

：n子项（5n+1）

将成功地允许我对大型全宽块进行样式设置，但对于其余部分，它将在

：奇数

和

：偶数

之间交替，直到出现

（5n+1）

下的下一个元素

---

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

看看这把快速小提琴：

---

n个孩子（3n+1）

如果我没弄错的话，似乎能搞定这个把戏。

你可以尝试以下工具：CSS Tricks的第n个测试仪

---

不管怎样，你已经拥有的东西都很管用。您只需为所有除法器提供相同的标记，即可覆盖第n种类型（5n+1）除法器中的默认样式。例如：

<div class='content'>1</div>
<div class='content'>2</div>
<div class='content'>3</div>
<div class='content'>4</div>
<div class='content'>5</div>
<div class='content'>6</div>
...

---

.

谢谢大家的帮助，尽管我似乎已经通过Twitter得到了答案：

CSS

---

非常感谢大家

请提供一个提琴。请提供你的html和你尝试过的样式，你也可以不只是样式你的50%的细胞，然后把第n个孩子的样式后，覆盖它？我似乎已经得到了一个答案通过Twitter，并将上传显示我的意思。我只是没有足够快地把代码放在第一位：SAnswer提供：谢谢大家！谢谢Duncan，但我需要两行50%的盒子，在里面创建一个2x2的网格。但是这个解决方案是朝着同一个方向发展的。在50%的div周围再加一个div，你就可以得到布局了，谢谢，詹姆斯。我正在上传一些和其他地方建议的非常类似的东西，但你是第一个在这里，所以我猜你会得到免费蛋糕（当然，打个比方说）。非常感谢。另一个答案是：谢谢你们！谢谢@DextrousDave，提供的答案是：

.content {
    width:50%;
    font-weight:bold;
    ...
}
.content:nth-child(5n+1){
    width:100%;            /* Overrides 50% */
    font-weight:normal;    /* Overrides bold */
    ...
}

div {
    width: 19px;
    border-right: 1px solid #fff;
    height: 10px;
    margin-bottom: 1px;
    background: red;
    float: left;
}

div:nth-of-type(5n+1) {
    clear: both;
    width: 40px;
    background: green;
}