css最后一个孩子不工作

Question

我有一个新闻文章网格，我想要它，所以网格中的最后两篇文章没有底部边框，但是我的 css last-child 选择器似乎不起作用，最后一篇文章右类的边框被取消，但是左类的最后一篇文章没有，这是有原因的吗？

这是我的代码和问题的小提琴。

http://jsfiddle.net/Udders/HJE5h/

Answer 1

正如@BoltClock 上面提到的，将 broder-bottom 替换为 border-top 并以 first-child 为目标。某些较旧的浏览器不支持 last-child：

JSFiddle：http:// jsfiddle.net/HJE5h/2/

编辑

好的，正如 @BoltClock 在下面的评论中提到的，问题并不完全在于 last-child 问题。但是，如果您确实按照上面的建议使用 border-top，然后定位紧随 first-child 的下一个 select 元素，您可以从前两篇文章中删除 border-top 。

section:first-child .snippet, section:first-child + section .snippet {
    background:none;
    border-top:none;
}

JSFiddle：http://jsfiddle.net/HJE5h/5/

Answer 2

您可以通过使用 nth-last-child(n) 伪类来实现这一点。它从集合的末尾开始，这样您就可以在不知道集合大小的情况下指定最后两个元素。请在您的 css 代码中尝试此选择器：

.grid_9:nth-last-child(1) .snippet, .grid_9:nth-last-child(2) .snippet {
    background: none;
    border-bottom: none;
}

这是有用的 css 选择器的一个很好的参考 http://net.tutsplus.com/tutorials/html-css-techniques/the-30-css-selectors-you-must-memorize/