Html CSS last-child 选择器：选择特定类的最后一个元素，而不是父级中的最后一个孩子？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7298057/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS last-child selector: select last-element of specific class, not last child inside of parent?
提问by matt
<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>
I want to select #com19?
我要选择#com19？
.comment {
width:470px;
border-bottom:1px dotted #f0f0f0;
margin-bottom:10px;
}
.comment:last-child {
border-bottom:none;
margin-bottom:0;
}
That does not work as long as I do have another div.somethingas actual last child in the commentList. Is it possible to use the last-child selector in this case to select the last appearance of article.comment?
只要我div.something在 commentList 中有另一个作为实际最后一个孩子，那就行不通了。在这种情况下是否可以使用 last-child 选择器来选择article.comment?
回答by Chris
:last-childonly works when the element in question is the last child of the container, not the last of a specific type of element. For that, you want :last-of-type
:last-child仅当相关元素是容器的最后一个子元素时才有效，而不是特定类型元素的最后一个。为此，你想要:last-of-type
As per @BoltClock's comment, this is only checking for the last articleelement, not the last element with the class of .comment.
根据@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>回答by Ozzy
If you are floating the elements you can reverse the order
如果您浮动元素，您可以颠倒顺序
i.e. float: right;instead of float: left;
即float: right;代替float: left;
And then use this method to select the first-child of a class.
然后使用此方法选择类的第一个孩子。
/* 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;
}
This is actually applying the class to the LAST instance only because it's now in reversed order.
这实际上只是将类应用于 LAST 实例，因为它现在处于相反的顺序。
Here is a working example for you:
这是一个适合您的工作示例：
<!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>
回答by hurrtz
I guess that the most correct answer is: Use :nth-child(or, in this specific case, its counterpart :nth-last-child). Most only know this selector by its first argument to grab a range of items based on a calculation with n, but it can also take a second argument "of [any CSS selector]".
我想最正确的答案是：使用:nth-child（或者，在这种特定情况下，它的对应物:nth-last-child）。大多数人只通过它的第一个参数来了解这个选择器，以根据 n 的计算获取一系列项目，但它也可以采用“[任何 CSS 选择器]”的第二个参数。
Your scenario could be solved with this selector: .commentList .comment:nth-last-child(1 of .comment)
您可以使用此选择器解决您的情况： .commentList .comment:nth-last-child(1 of .comment)
But being technically correct doesn't mean you can use it, though, because this selector is as of now only implemented in Safari.
但是技术上正确并不意味着你可以使用它，因为这个选择器现在只在 Safari 中实现。
For further reading:
进一步阅读：
回答by A Friend
Something that I think should be commented here that worked for me:
我认为应该在这里评论一些对我有用的东西：
Use :last-childmultiple times in the places needed so that it always gets the last of the last.
:last-child在需要的地方多次使用，以便它总是最后一个。
Take this for example:
以这个为例：
.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>回答by lsblsb
What about this solution?
这个解决方案怎么样？
div.commentList > article.comment:not(:last-child):last-of-type
{
color:red; /*or whatever...*/
}
