选择每第一个和四个小时（最后一个）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>

第二个代码的工作，但我有第一个麻烦？

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

JSFiddle。

Answer 1

尝试这种情况：

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

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

Answer 2

JSFIDDLE

4N将选择4，8，12 ....

4N + 1将选择1，5，9，13，...

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