具有特定类的最后一个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将为您提供容器中倒数第二个元素，+选择器将为您提供类.pagination-bar的相邻元素。

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

话虽如此，浏览器支持仅限于此伪类。

Answer 3

这应该这样做：

div.container div.article:last-child {margin-bottom: 0;}

我认为你没有正确地提出这个问题。根据它的外观，.pagination-bar上没有边距，你实际上想从上一篇文章div中删除margin-bottom所以上面的答案增加+ .pagination-bar可能无法正常工作，因为它的目标是错误的元素。尝试没有+ .pagination-bar

Answer 4

使用：last-child选择器是正确的方式，正如其他人所说，但根据：http://www.quirksmode.org/css/contents.html IE 5.5,6,7或8不支持此CSS选择器。