将 CSS 应用于特定类的最后一个元素答案

【问题标题】：Apply CSS to last element of specific class将 CSS 应用于特定类的最后一个元素
【发布时间】：2019-07-22 23:39:16
【问题描述】：

我想在上一篇博文中应用一些 CSS。问题是 div 'blog-posts' 中的最后一个元素与 'blog-post' div 的元素类型相同。

我试过了：

最后一个类型
最后一个孩子

HTML：

<div class="blog-posts">
    <div class="blog-post"></div>
    <div class="blog-post"></div>
    <div class="blog-post"></div>
    <div class="blog-post"></div>
    <div class="f03-456245"></div>
</div>

CSS：

.blog-post:last-child{
    //do some css
}

【问题讨论】：

last-child 不能那样工作。它只选择最后一个子元素，而不是某个类的最后一个子元素。在这种情况下，它什么也不做，因为最后一个孩子没有 blog-post 类。您可以在此thread 中找到更多信息。
如果你总是有相同数量的 div 可以使用 .blog-posts div:nth-child(4)
CSS last-child selector: select last-element of specific class, not last child inside of parent?的可能重复
另一种选择可能是实际使用列表作为您的博客文章“列表”。 jsfiddle.net/sheriffderek/quumnr6h

标签： html css css-selectors

【解决方案1】：

不能使用.class 的最后一个元素。在您的情况下，您可以使用 nth-last-child 属性。

 .blog-posts div:nth-last-child(2) {
   background: #ff0000;
 }

DEMO

【讨论】：

但此解决方案仅突出显示倒数第二个元素，而不是特定类的最后一个元素
你是对的。根据他的模型，我给出了我的解决方案。

【解决方案2】：

您可能必须这样做：

.blog-posts div:last-child{
  //do some css
}

假设div 是元素。它适用于任何其他元素类型 p ， span 等...

【讨论】：