CSS最后一个子选择器：选择特定类的最后一个元素，而不是父代中的最后一个子元素？

109

<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的最后一次出现？

jsFiddle

来源

2011-09-04 matt

160

:last-child只有当有问题的元素是容器的最后一个孩子，不是最后一个特定类型的元素的作品。对于这一点，你要:last-of-type

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

按@ 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; 
}

来源

2011-09-04 08:17:03 Chris

+81

它不看类，但是，只有类型，因此，如果您正好有你将同一类非文章得到意想不到的结 – BoltClock

事实上，正如在这里证明：http://jsfiddle.net/YmMZZ/1/ – Chris

它正常工作。但是，如果我们需要他们按类别缩小元素，那么它就不会再起作用。 http://jsfiddle.net/aliemreeee/a4H7f/2/ –

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

即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>

来源

2013-07-29 00:59:06 Ozzy

请注意，如果浮动元素被推到下一行（即没有足够的水平空间浮动右/左） – Ozzy

这个怎么样的解决方案？

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

来源

2015-04-09 10:12:33 lsblsb

在'最后一个孩子'之前需要冒号。 – Austen

没错。错字。谢谢。编辑。 – lsblsb

@lsblsb，你在这里使用'article'，所以：对于给定的例子，not（：last-child）是不必要的。 –

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

你的情况可能与此选择来解决：.commentList .comment:nth-last-child(1 of .comment)

但在技术上是正确的，并不意味着你可以使用它，但是，因为这个选择是截至目前仅应用于Safari。

对于进一步阅读：

来源

2017-08-17 13:01:19 hurrtz

的东西，我觉得应该在这里评论说，为我工作：

使用: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>

来源

2017-11-22 01:53:30 Jesus

哦，儿子！你去哪儿了？ –

@ManojKumar无处不在我的孩子 – Jesus

当一大群人在等待你的第二次来临时，你在做什么？ –

CSS最后一个子选择器：选择特定类的最后一个元素，而不是父代中的最后一个子元素？

回答

相关问题