CSS最后一个孩子不工作答案

【问题标题】：css last child not workingCSS最后一个孩子不工作
【发布时间】：2011-12-21 20:19:24
【问题描述】：

我有一个新闻文章网格，我想要它，所以网格中的最后两篇文章没有底部边框，但是我的 css last-child 选择器似乎不起作用，最后一篇文章的类正确是不是去掉了边框，而上一篇带左类的文章却没有，有这个原因吗？

这是我的代码和问题。

【问题讨论】：

最后一个.left 不是你最上面的div 的最后一个孩子，所以它不匹配。
有没有办法可以定位最后一个 .left 和最后一个 .right？
由于回溯限制，不使用 CSS，但如果你能以某种方式将底部边框切换为顶部边框，并使用 this technique 应用边框和背景，它可能会起作用。
如果你能用:last-child，你就不能用:nth-last-child吗？它们具有几乎相同级别的浏览器支持。 jsfiddle.net/thirtydot/HJE5h/3
@thirtydot：应该有可能，但这在某种程度上取决于.left 和.right 元素的结构。不过看起来值得一试。

【解决方案1】：

正如上面@BoltClock 所述，将broder-bottom 替换为border-top 并改为定位first-child。部分老浏览器不支持last-child:

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

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

【讨论】：

【解决方案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;
}

【讨论】：