如何选择具有特定类的最后一个元素，而不是父级中的最后一个子元素？答案

【问题标题】：How can I select the last element with a specific class, not last child inside of parent?如何选择具有特定类的最后一个元素，而不是父级中的最后一个子元素？
【发布时间】：2011-11-10 00:21:39
【问题描述】：

<div class="commentList">
   <article class="comment " id="com21"></article>
   <article class="comment " id="com20"></article>
   <article class="comment " id="com19"></article>
   <div class="something"> hello </div>
</div>

我要选择#com19？

.comment {
    width:470px;
    border-bottom:1px dotted #f0f0f0;
    margin-bottom:10px;
}

.comment:last-child {
    border-bottom:none;
    margin-bottom:0;
}

只要我确实有另一个div.something 作为commentList 中的实际最后一个孩子，这就行不通了。在这种情况下是否可以使用last-child选择器来选择article.comment的最后一次出现？

jsFiddle

【问题讨论】：

链接：select the “last child” with a specific class name in CSS?

标签： html css css-selectors

【解决方案1】：

:last-child 仅在相关元素是容器的最后一个子元素时才有效，而不是特定类型元素的最后一个子元素。为此，您需要:last-of-type

http://jsfiddle.net/C23g6/3/

根据@BoltClock 的评论，这只是检查最后一个article 元素，而不是.comment 类的最后一个元素。

body {
  background: black;
}

.comment {
  width: 470px;
  border-bottom: 1px dotted #f0f0f0;
  margin-bottom: 10px;
}

.comment:last-of-type {
  border-bottom: none;
  margin-bottom: 0;
}

<div class="commentList">
  <article class="comment " id="com21"></article>

  <article class="comment " id="com20"></article>

  <article class="comment " id="com19"></article>

  <div class="something"> hello </div>
</div>

【讨论】：

它不看类，只看类型，所以如果你碰巧有非同一个类的文章，你会得到意想不到的结果。
它工作正常。但是，如果我们需要它们按类缩小元素范围，它就不再起作用了。 jsfiddle.net/aliemreeee/a4H7f/2
根据这些答案，我认为没有办法选择last-of-class。
直到 CSS 选择器级别 4 被浏览器接受并实现，您将可以访问 :nth-match(selector) 和 :nth-last-match(selector)。有关更多详细信息，请参阅w3.org/TR/selectors4。
或者更确切地说，:nth-last-child(An+B of selector)，因为 :nth-last-match() 早在那之前就被删除了，但他们并没有费心更新 WD。见stackoverflow.com/questions/21167159/css-nth-match-doesnt-work/…

【解决方案2】：

我猜最正确的答案是：使用:nth-child（或者，在这种特定情况下，它的对应物:nth-last-child）。大多数人只知道这个选择器的第一个参数是根据 n 的计算来获取一系列项目，但它也可以接受第二个参数“[任何 CSS 选择器]”。

你的场景可以用这个选择器解决：.commentList .comment:nth-last-child(1 of .comment)

但是，技术上正确并不意味着您可以使用它，因为这个选择器目前仅在 Safari 中实现。

进一步阅读：

【讨论】：

【解决方案3】：

如果你浮动元素，你可以颠倒顺序

即float: right; 而不是 float: left;

然后使用这个方法来选择一个类的第一个孩子。

/* 1: Apply style to ALL instances */
#header .some-class {
  padding-right: 0;
}
/* 2: Remove style from ALL instances except FIRST instance */
#header .some-class~.some-class {
  padding-right: 20px;
}

这实际上是将类应用于 LAST 实例，只是因为它现在的顺序相反。

这是一个适合您的工作示例：

<!doctype html>
<head><title>CSS Test</title>
<style type="text/css">
.some-class { margin: 0; padding: 0 20px; list-style-type: square; }
.lfloat { float: left; display: block; }
.rfloat { float: right; display: block; }
/* apply style to last instance only */
#header .some-class {
  border: 1px solid red;
  padding-right: 0;
}
#header .some-class~.some-class {
  border: 0;
  padding-right: 20px;
}
</style>
</head>
<body>
<div id="header">
  <img src="some_image" title="Logo" class="lfloat no-border"/>
  <ul class="some-class rfloat">
    <li>List 1-1</li>
    <li>List 1-2</li>
    <li>List 1-3</li>
  </ul>
  <ul class="some-class rfloat">
    <li>List 2-1</li>
    <li>List 2-2</li>
    <li>List 2-3</li>
  </ul>
  <ul class="some-class rfloat">
    <li>List 3-1</li>
    <li>List 3-2</li>
    <li>List 3-3</li>
  </ul>
  <img src="some_other_img" title="Icon" class="rfloat no-border"/>
</div>
</body>
</html>

【讨论】：

请注意，如果浮动元素被推到下一行（即没有足够的水平空间来向右/向左浮动），这将不起作用
.some-class~.some-class 在只有 2 个元素重复时非常适合我。

【解决方案4】：

我认为应该在这里评论一些对我有用的东西：

在需要的地方多次使用:last-child，这样它总是能得到最后一个。

以此为例：

.page.one .page-container .comment:last-child {
  color: red;
}
.page.two .page-container:last-child .comment:last-child {
  color: blue;
}

<p> When you use .comment:last-child </p>
<p> you only get the last comment in both parents </p>

<div class="page one">
  <div class="page-container">
    <p class="comment"> Something </p>
    <p class="comment"> Something </p>
  </div>

  <div class="page-container">
    <p class="comment"> Something </p>
    <p class="comment"> Something </p>
  </div>
</div>

<p> When you use .page-container:last-child .comment:last-child </p>
<p> you get the last page-container's, last comment </p>

<div class="page two">
  <div class="page-container">
    <p class="comment"> Something </p>
    <p class="comment"> Something </p>
  </div>

  <div class="page-container">
    <p class="comment"> Something </p>
    <p class="comment"> Something </p>
  </div>
</div>

【讨论】：

感谢您的回答。它有帮助。我有一个问题。为什么.page.one .page-container:last-child 不指向最后一个孩子？为什么我们还要在类列表中添加注释？
@Bharat 这很难解释，但我会尽力而为。这里有一个层次结构； page 是父母，page-container 是孩子，comment 是孙子女。如果您只执行.page.one .page-container:last-child，那么您将获得最后一个拥有page-container 类的孩子，而不是最后一个拥有comment 类的孩子，因为从未指定过。当使用:last-child 时，它不会查看最后一个子元素的选定元素，它会查看选定元素以查看它是否是最后一个子元素。这有意义吗？

【解决方案5】：

这个解决方案怎么样？

div.commentList > article.comment:not(:last-child):last-of-type
{
    color:red; /*or whatever...*/
}

【讨论】：

@lsblsb，你在这里使用article，所以 :not(:last-child) 对于给定的例子来说不是必需的。
如果类something 的元素在原始HTML 中不存在并且被动态插入hover 怎么办？这个解决方案不会失败吗？

【解决方案6】：

如果最后一个元素类型也是文章，last-of-type 将无法按预期工作。

也许我不太明白它是如何工作的。

demo

【讨论】：