CSS最后一个子选择器：选择特定类的最后一个元素，而不是父代中的最后一个子元素？
<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？CSS最后一个子选择器：选择特定类的最后一个元素，而不是父代中的最后一个子元素？
.comment {
width:470px;
border-bottom:1px dotted #f0f0f0;
margin-bottom:10px;
}
.comment:last-child {
border-bottom:none;
margin-bottom:0;
}
这并不工作，只要我有另一个div.something作为commentList实际最后一个孩子。在这种情况下是否可以使用最后一个孩子选择器来选择article.comment的最后一次出现？
:last-child只有当有问题的元素是容器的最后一个孩子，不是最后一个特定类型的元素的作品。对于这一点，你要:last-of-type
按@ BoltClock的评论，这是只检查最后article元素，而不是与类的.comment最后一个元素。
HTML
<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>
CSS
body {
background: black;
}
.comment {
width:470px;
border-bottom:1px dotted #f0f0f0;
margin-bottom:10px;
}
.comment:last-of-type {
border-bottom:none;
margin-bottom:0;
}
如果你是浮动的元素，你可以颠倒顺序
即float: right;而不是float: left;
然后使用此方法选择第一个孩子一个班级的d。
/* 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;
}
这实际上是应用类，只是因为它现在是在相反的顺序的最后一个实例。
这是给你一个工作示例：
<!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>
请注意，如果浮动元素被推到下一行（即没有足够的水平空间浮动右/左） – Ozzy
我想这是最正确的答案是：使用:nth-child（或者，在这种特殊情况下，其对应:nth-last-child）。大多数人只知道这个选择器的第一个参数，以基于n的计算获取一系列项目，但它也可以采用“[任何CSS选择器]”的第二个参数。
你的情况可能与此选择来解决：.commentList .comment:nth-last-child(1 of .comment)
但在技术上是正确的，并不意味着你可以使用它，但是，因为这个选择是截至目前仅应用于Safari。
对于进一步阅读：
的东西，我觉得应该在这里评论说，为我工作：
使用: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>
它不看类，但是，只有类型，因此，如果您正好有你将同一类非文章得到意想不到的结 – BoltClock
事实上，正如在这里证明：http://jsfiddle.net/YmMZZ/1/ – Chris
它正常工作。但是，如果我们需要他们按类别缩小元素，那么它就不会再起作用。 http://jsfiddle.net/aliemreeee/a4H7f/2/ –