html - 仅向第一个和第二个 div 添加边距

Question

我希望仅向第一个和第二个“页面”div 添加 10px 的底部边距。我应该将它添加到页面还是页面 block

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

Demo

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