具有特定类的最后一个div的css选择器

Question

我有这种情况:

<div class="container">
 <div class="pagination-bar"></div>
 <div class="article"></div>
 [..]
 <div class="article"></div>
 <div class="pagination-bar"></div>
</div>

这个CSS:

.article {
 margin-bottom:20px;
}

如果我希望分页栏在没有20px边距的情况下接近最后一篇"文章"div怎么办？

更新 [参见容器div顶部和末尾的分页栏]

Answer 1

您可以像这样，也与IE7兼容

div.article + div.article {
    margin-top:20px;
}

除了第一篇文章之外，这还增加了页边空白。

Answer 2

尝试这个：

.container > div:nth-last-child(2) + .pagination-bar { color: red; }

:nth-last-child将为您提供容器中倒数第二个元素，+选择器将为您提供带有 class 的相邻元素.pagination-bar。

这是我的测试： http: //jsfiddle.net/gYM7x/

话虽如此，浏览器对此伪类的支持是有限的。