css - css last-child 没有正常工作

Question

在我的网站中，每个帖子都有一个底部边框。我申请了一个

article:last-child {border-bottom:none;}

这样最后一个帖子的底部没有边框，但它仍在显示。

我究竟做错了什么？

Answer 1

last-child如果您有任何其他元素，则将article失败last-of-type。

因为last-child在nav您的网站上，CSS 将寻找最后一个article孩子，但最后一个孩子是nav因此选择器出错。

另一方面，last-of-type将选择article其父元素的最后一个元素。

改用它，它肯定会起作用

.content-pad-left article:last-of-type {
   border-bottom:none;
}

Answer 2

last-child在IE 8中不可用。文章标签仍然可以通过使用modernizr来解决。

为了向后兼容，您想使用第一个孩子 -

article { border-top: 1px solid #eee; }
article:first-child { border-top: none;}

这就是您当前的网站在 IE 8 中的样子。