:最后一个孩子的选择器在一些页面上工作,但在其他页面上不工作

piok6c0g  于 2022-10-04  发布在  其他
关注(0)|答案(2)|浏览(145)

我希望Wordpress页面上除了最后一个帖子之外的所有帖子之间都有简单的分隔符,我已经使用底部边框实现了这一点。

我已经使用最后一个孩子去掉了每个页面最后一个帖子的边框,它在一些帖子上有效,但在其他帖子上不起作用。

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,而不是一篇文章,所以不应该受到我的文章的影响。post:最后一个孩子的选择器。

更奇怪的是,每个标签页面上的第一篇文章都是以:第一个孩子的选择器为目标,但最后一篇文章却没有回应:最后一个孩子。

我不明白为什么在主页和标签页面之间生成的非常相似的标记在一种情况下可以工作,而在另一种情况下不能。

我的css完全有效。

有谁能给我提点建议吗?

gab6jxml

gab6jxml1#

:last-child通常表示“最后一个子元素”,即其容器的最后一个子元素。在您说:last-child不起作用的页面上,您有另一个div作为最后一个孩子(更具体地说是<div class="pagination clearfix">)。

我认为有两种解决方案:

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

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

lyfkaqu1

lyfkaqu12#

:最后一个子代匹配其父元素的最后一个子代,而不是“它的最后一个种类”

你可以试一试

// 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:...

或用法:最后一种类型,但我不确定它得到了多大的支持。

相关问题