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 ）？

JSFiddle

Answer 1

试试这个：

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

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

Answer 2

JSFIDDLE

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

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

使用公式（a + 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');

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

5 个答案: