如何选择具有特定类的最后一个元素，而不是父级中的最后一个子元素？
Posted
技术标签:
【中文标题】如何选择具有特定类的最后一个元素，而不是父级中的最后一个子元素？【英文标题】：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? 【参考方案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。见***.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 中实现。
进一步阅读：
https://drafts.csswg.org/selectors-4/#the-nth-child-pseudo http://caniuse.com/#search=nth-child【讨论】：
【参考方案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
【讨论】：
以上是关于如何选择具有特定类的最后一个元素，而不是父级中的最后一个子元素？的主要内容，如果未能解决你的问题，请参考以下文章