僅向第一和第二div添加邊距

Question

我希望僅在第一和第二“頁面” div中添加10px的底邊距。 我應該將其添加到頁面還是頁面塊

http://codepen.io/anon/pen/RWYObw

<div class="rows first">
<div class="page">
<div class="page-block">
<div class="page-image"><a href="/cat1"><img alt="" src="mypic1.jpg"   style="width: 198px; height: 178px;"></a></div>

<div class="block-heading"><a href="/category1">category1</a></div>
</div>
</div>

<div class="page">
<div class="page-block">
<div class="page-image"><a href="/cat2"><img alt="" src="mypic2.jpg"  style="width: 201px; height: 178px;"></a></div>

<div class="block-heading"><a href="/category2">category2</a></div>
</div>
</div>

<div class="page">
<div class="page-block">
<div class="page-image"><a href="/cat3"><img alt="" src="mypic3.jpg"   style="width: 227px; height: 170px;"></a></div>

<div class="block-heading"><a href="/category3">category3</a></div>
</div>
</div>

<div class="page last">
<div class="page-block">
<div class="page-image"><a href="/cat4"><img alt="" src="mypic4.jpg" style="width: 201px; height: 178px;"></a></div>

<div class="block-heading"><a href="/category4">category4</a></div>
</div>
</div>
</div>

所以cat1和cat2可以加一個間隙

Answer 1

您可以將first-of-type與+相鄰的選擇器一起使用。 您也可以為此使用nth-of-type 。

.page:first-of-type,
.page:first-of-type + div.page {
  margin-bottom: 10px;
}

演示

nth-of-type()在這里也很方便，

.page:nth-of-type(1),
.page:nth-of-type(2) {
  margin-bottom: 10px;
}

還有另一種方法可以實現此目的，但是我建議您忽略它，因為它很大程度上取決於父子關系。

.row > div:nth-of-type(1),
.row > div:nth-of-type(2) {
  margin-bottom: 10px;
}

Answer 2

我覺得

.page:nth-of-type(-n+2){
    margin-bottom: 10px;
}

是實現此目標的最佳方法。 比...干凈

.page:nth-of-type(1), .page:nth-of-type(2){
    margin-bottom: 10px;
}

Answer 3

您可以在這里新建一個班級：

.with-bottop-margin {
    margin-bottom:10px;
}

並將此類與頁面類一起添加到該div

Answer 4

以下內容也將起作用： http : //jsfiddle.net/5thvp1xL/1/

.page:nth-child(1), .page:nth-child(2) {
    margin-bottom: 10px;
}