如何設計一對元素？

Question

我有一套的div，像這樣

<div class="row header"></div> 
<div class="row"></div> 
<div class="row"></div> 
<div class="row"></div> 
<!-- add spacing here by adding margin to the row above --> 
<div class="row header"></div> 
<div class="row"></div> 
<div class="row"></div> 

正如我不能改變的標記，我不知道如果我只能無需對其他的div任何更改添加.row和.row.header之間的空間。理想情況下，我需要將margin-bottom添加到.row.header之前的每個.row。

這是可能的CSS所有沒有添加額外的類和黑客？

Answer 1

正如在這個答案https://stackoverflow.com/a/1817801/2894798有在CSS沒有上一個兄弟選擇指示，我會建議增加保證金頂.row.header

.row + .row.header{ 
margin-top:20px; 
} 

Answer 2

您可以使用adjacent sibling selector：

.row + .row.header { 
    margin-top: 20px; 
} 

這隻會頂邊距添加到跟從.row元素，確保第一.row.header元件不受那些.row.header元素。

Answer 3

它更容易上邊距增加的div既row和header類

.row.header { 
margin-top: 5px; 
} 

Answer 4

If you want apply margin only where is the comment is written you can add css for that as follows 

div.row:nth-of-type(4) { 
    margin-bottom: 20px; 
} 

but if you want add margin to every 3'd div after .header, you need to apply css as follows 

div.row:nth-of-type(4n) { 
    margin-bottom: 20px; 
} 

希望這將填補滿您的要求。

Answer 5

如果.row.header是其父項的第一個孩子，您也可以使用:not()選擇器。對於more info.

.row.header:not(:first-child) { 
    margin-top: 10px; 
}