css - 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)将成功地允许我设置大的全宽块的样式，但对于其余部分，它将在 和 之间交替:odd，:even直到出现下一个元素(5n+1)。

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

Answer 1

看看这个快速小提琴：

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

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

Answer 2

无论如何，您已经拥有的东西非常有效。您可以nth-type(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>
...

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

JSFiddle 演示。

Answer 3

感谢各位的帮助，虽然我似乎已经通过 Twitter 获得了答案：http: //jsfiddle.net/AK5WL/1/

CSS

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;
}

非常感谢大家！

Answer 4

您可以尝试以下工具：来自 CSS-Tricks 的 nth Tester

http://css-tricks.com/examples/nth-child-tester/