Question

我正在尝试为网站上的内容创建一个阻止网格，该网格遵循如下所示的模式。它必须完全配置CSS，没有JavaScript！

模式：

| - - - - | =＆GT; 1 x 100％
  | - - | - - | =＆GT; 2 x 50％
  | - - | - - | =＆GT; 2 x 50％
  | - - - - | =＆GT; 1 x 100％
  | - - | - - | =＆GT; 2 x 50％
  | - - | - - | =＆GT; 2 x 50％
  | - - - - | =＆GT; 1 x 100％
  | - - | - - | =＆GT; 2 x 50％
  | - - | - - | =＆GT; 2 x 50％
  | - - - - | =＆GT; 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 demo

Answer 3

您可以尝试以下工具：来自CSS-Tricks的第n个测试人员

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

Answer 4

感谢帮助人员，虽然我似乎通过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;
}

非常感谢所有人！

CSS nth-child自定义模式

4 个答案: