Question

我希望Wordpress页面上的一系列帖子中的最后一个帖子之间只有简单的分隔符，我使用底部边框实现了它们。

我使用了最后一个孩子删除了每个页面最后一个帖子的边框，它适用于某些帖子但不适用于其他帖子。

the homepage上的最后一个帖子没有预期的底部边框，但在tag pages上，最后一篇文章似乎完全忽略了：last-child选择器。它在this JSFiddle中也不起作用。

Markup基本上是这样的：

<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而不是一篇文章不应该受到我的文章的影响.post：elastic-child选择器。

甚至更奇怪 - 每个标签页面上的第一篇文章都回应了以第一个孩子选择器为目标，但最后一篇文章没有回复：last-child。

我无法弄清楚为什么在主页和标签页之间看起来非常相似的生成标记在一种情况下起作用而在另一种情况下不起作用。

我的CSS完全验证。

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

Answer 1

: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匹配它的父元素的最后一个孩子，而不是＆＃34;它的最后一个＆＃34;

你可以尝试

 // 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-child选择器在某些页面上工作但在其他页面上不工作

2 个答案:

我认为有两种解决方案：