html - 选择每个第一个和第四个（最后一个）div

Question

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

.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>

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

如何选择行中的每个第一个和最后一个div（行包含四个 div）？

JSF中。

Answer 1

尝试这个：

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

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

Answer 2

JSFIDDLE

4n 将选择 4, 8, 12 ....

4n+1 将选择 1, 5, 9, 13, ...

使用公式 (an + b)。说明：a代表一个周期大小，n是一个计数器（从0开始），b是一个偏移值。

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

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

Answer 3

http://jsfiddle.net/jnQZU/2/

.box:nth-child(4n){
    background: blue;
}

.box:nth-child(4n+1){
    background: orange;
}

Answer 4

尝试这个：

http://jsfiddle.net/cJwVc/

.box:nth-child(4n+1){
   background-color:yellow;
   margin-left:0;
}

.box:nth-child(4n){
   background-color:blue;
    margin-right:0;
}

Answer 5

如果您需要 IE8 或更低版本的支持，那么您应该使用 Jquery 中的选择器。使用您的示例：

$('.box:nth-child(4n+1)').css('background-color', 'yellow');