選擇行中的第四個div，刪除邊距

Question

比方說，我有860px的寬度區域，我需要放置4個div（200px寬度）和3個空格beetween（20px）。 如果將只有4格在所有的，我可以用

.div {width:200px; margin-right:20px} 
.div:last-child {margin-right:20px;} 

但可以有任意數量的div，但僅限於涉及到一條線，所以我不能使用最後一子。但是一行的寬度總是860px。

如何從行中的第四個div刪除margin-right？或者如何正確設置這個間距？

Answer 1

如果您針對的是每4個div元素，則需要使用nth-of-type，其表達式爲(4n+4)，因此它會選擇每4個元素。

div:nth-of-type(4n+4) { 
    color: red; 
} 

Demo

注：我在這裏用一般的元素選擇，所以你需要爲你使用一個名爲.div

Answer 2

這個類的div前添加 .

.div:nth-child(4){margin-right:0px;} 

應該工作。

但我認爲你可以簡單地做：

.div{margin-left:20px;} 
.div:first-child{margin-left:0px;} 

因爲第一個元素永遠不會改變。

Answer 3

所以，你需要的是一個網格系統，使用第n個孩子：

div{margin-left:20px;} 
div:nth-child(3n+1) { 
margin-left: 0; 
} 

Answer 4

有人發佈答案與此

.div + .div{margin-left:20px;} 

，但刪除了它。 它適合我，看起來不錯。這是否正確嗎？

Answer 5

@Mr。外星人給出了最好的答案。但是，在你的情況，你可以做這樣也當你給保證金的權利#main > div最後一個也具有裕度（就好像你的全寬）

<div id="main"> 
<div>one</div> 
<div>two</div> 
<div>three</div> 
<div>four</div> 
<div>five</div> 
<div>six</div> 
</div> 

，

這樣或者你可以做

#main{margin-right: -10px; /*what margin you have given to #main > div */}