選擇每第一個和四個小時（最後一個）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');