:last-child 选择器在某些页面上工作，但在其他页面上不工作

Question

我希望除了 Wordpress 页面上一系列文章中的最后一篇文章之外的所有文章都在它们之间设置简单的分隔线，我已经使用底部边框实现了这些分隔线。

我已经使用 last-child 删除了每页最后一篇文章的边框，它适用于某些文章，但不适用于其他文章。

the homepage 上的最后一个帖子没有预期的底部边框，但tag pages 上的最后一个帖子似乎完全忽略了 :last-child 选择器。它也不适用于this JSFiddle。

标记基本上是这样的：

<div id="full-width">
 <article id="post-250" class="post">
   Post here
 </article>
 <article id="post-245" class="post">
   Post here
 </article>
 <div class="pagination clearfix">
 </div>
</div>

使用这个 CSS：

article.post {
padding-bottom: 60px;
border-bottom: 1px solid #dddddd;
}

article.post:last-child {
padding-bottom: 0px;
border-bottom: 0 none; 
}

我不确定它是否与文章下方的分页 div 有关（当有更多内容时，它会开始发挥作用），但那是一个 div 而不是一篇文章，所以不应该受到影响我的 article.post:last-child 选择器。

更奇怪的是 - 每个标签页面上的第一篇文章都会使用 :first-child 选择器来响应目标，但最后一篇文章不会响应 :last-child。

我不明白为什么主页和标签页之间看起来非常相似的生成标记在一种情况下有效而在另一种情况下无效。

我的 CSS 完全验证。

任何人都可以提出任何建议吗？

Answer 1

:last-child 意味着 last child，它容器的最后一个子元素。在你说:last-child 不起作用的页面上，你有另一个 div 作为最后一个孩子（更具体地说是<div class="pagination clearfix">）。

在我看来，有两种解决方案：

1.如果您不想更改标记，可以使用article:last-of-type 而不是article.post:last-child。

2.将<div class="pagination clearfix">移出该容器。

Answer 2

:last-child 匹配其父元素的最后一个子元素，而不是“最后一个同类”

你可以试试

 // This match and article with post class followed by anotherarticle with post class 
 article.post + article.post { 
 padding-bottom: 60px;
 border-bottom: 1px solid #dddddd;
 }

 // This match and article with post class followed by a div
 article.post + div {
   border-bottom:...

或者使用 :last-of-type，但我不确定它的支持程度。