html - 选择每个第一个和第四个(最后一个)div

Question

如何使用 :nth-child 选择器选择第一个和第四个 div 以向其添加特定样式？

.main{
  width:460px;
  height:240px;
}
.box{
  width:100px;
  height:100px;
  background:red;
  float:left;
  margin:10px;
}

/*I tried */

.box:nth-child(n+4),.box:first-child{
  margin:10px 10px 10px 0;
}

.box:nth-child(4n){
  margin:10px 0px 10px 10px;
}

<div class="main">
  <div class="box"></div> <!-- margin-left:0px -->
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div> <!-- margin-right:0px -->
  <div class="box"></div> <!-- margin-left:0px -->
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div> <!-- margin-right:0px -->
</div>

第二个代码有效，但第一个代码有问题？

如何选择行中的每个first和last div(行包含四个div)？

JSFiddle .

Answer 1

试试这个:

.box:nth-child(4n+1)

这应该包括第一个 (+1) 元素，然后是每四个 (4n)。