仅为第一个和第二个div添加边距

Question

我希望仅向第一个和第二个“page”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

您可以将$("form").each(function() { $(this).find(':input') if (!isNaN(this.value)) { this.value = this.value .replace(/&/g, "&amp;") .replace(/</g, "&lt;") .replace(/>/g, "&gt;") .replace(/"/g, "&quot;") .replace(/'/g, "&#039;"); } }); 与邻近选择器的first-of-type一起使用。您也可以使用+。

nth-of-type

Demo

.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;
}

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;
}