如何使用n-child来展示“砖头”。多行的样式视图？

Question

我想要建造一块砖头＆＃39;多行的样式视图。

假设显示12列网格，如下所示;

4col，8col

8col，4col

4col，8col

8col，4col

4col，8col

因此，8列行的重复序列为2,3,6,7,10,11

如何定位8列行？

Answer 1

以下是使用:nth-child()

的方法

div:nth-child(4n + 2), div:nth-child(4n + 3) {
  color: red;
}

<div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div><div>7</div><div>8</div><div>9</div><div>10</div><div>11</div>

Answer 2

匹配选择器是

div:nth-child(4n+2), div:nth-child(4n+3) {...}

（如果所有这些都是DIV并且没有其他包装器或类似物）

＆＃13;

＆＃13;

* {
box-sizing: border-box;
}
body, html {
margin: 0;
}
div {
display: inline-block; 
border: 1px solid #ccc;
background: red;
}
.four {
width: 33.3%;
}
.eight {
width: 66.6%;
}
div:nth-child(4n+2), div:nth-child(4n+3) {
background: green;
}

＆＃13;

<div class="four">4</div><div class="eight">8</div>
<div class="eight">8</div><div class="four">4</div>
<div class="four">4</div><div class="eight">8</div>
<div class="eight">8</div><div class="four">4</div>
<div class="four">4</div><div class="eight">8</div>
<div class="eight">8</div><div class="four">4</div>
<div class="four">4</div><div class="eight">8</div>
<div class="eight">8</div><div class="four">4</div>

＆＃13;

＆＃13;

＆＃13;