CSS最后一个子项选择器:选择特定类的最后一个元素，而不是父类中的最后一个子项？
CSS最后一个子项选择器:选择特定类的最后一个元素，而不是父类中的最后一个子项？
提问于 2011-09-04 16:15:34
<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;
}只要我在commentList中有另一个div.something作为实际的最后一个孩子，这就不起作用。在这种情况下，是否可以使用最后一个子项选择器来选择article.comment的最后一个外观
回答 5
Stack Overflow用户
回答已采纳
发布于 2011-09-04 16:17:03
只有当有问题的元素是容器的最后一个子元素，而不是特定类型元素的最后一个时，:last-child才有效。为此，您需要:last-of-type
根据@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>
Stack Overflow用户
发布于 2013-07-29 08:59:07
如果要浮动元素，则可以颠倒顺序
即用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;
}这实际上只是将类应用于最后一个实例，因为它现在的顺序颠倒了。
下面是一个有效的示例：
<!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>Stack Overflow用户
发布于 2017-11-22 09:53:31
我认为我应该在这里评论一些对我有效的东西：
在需要的地方多次使用: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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/7298057
复制相关文章
相似问题
腾讯云开发者
