我怎么能选择一个特定的类的最后一个元素，而不是父里面的最后一个孩子?

<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作为实际的最后一个子注释列表。在这种情况下，是否可以使用最后一个子选择器来选择article.comment的最后一个外观?

js小提琴

当前回答

:last-child只在相关元素是容器的最后一个子元素时才有效，而不是特定类型元素的最后一个子元素。为此，您需要:last-of-type

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

根据@BoltClock的注释，这只是检查最后一个article元素，而不是带有.comment类的最后一个元素。

身体{ 背景:黑色; ｝ .comment { 宽度:470 px; Border-bottom: 1px虚线#f0f0f0; margin-bottom: 10 px; ｝ .comment: last-of-type { 边界底部:没有; 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 >

2011-09-04 08:17:03

其他回答

我想最正确的答案是:使用:n -child(或者，在这个特定的情况下，它的对应物:nth-last-child)。大多数人只知道这个选择器的第一个参数是基于n的计算来获取一个项目范围，但它也可以有第二个参数“of[任何CSS选择器]”。

你的场景可以用下面的选择器来解决:

但是技术上正确并不意味着你可以使用它，因为这个选择器目前只在Safari中实现。

欲进一步阅读:

https://drafts.csswg.org/selectors-4/#the-nth-child-pseudo http://caniuse.com/#search=nth-child

2017-08-17 13:01:19

现在可以通过使用:has()来解决这个问题，具体来说:

/* switch out the {class} below */
.{class}:not(:has(~ .{class}))

类似的技术还允许您选择容器中类的最后一次出现，或者一组元素中的最后一次出现。有关示例，请参阅下面的代码片段。

注意:has()目前支持Chrome, Edge和Safari，但不支持Firefox(2022年1月)

/* last in group */ .class:has(+ :not(.class)) { background: pink; } /* anything but last in container */ .class:has(~ .class) { box-shadow: 0 0 0 1px #F00A; } /* last in container */ .class:not(:has(~ .class)) { background: #0F0A; } <div> <div class="class">not-last</div> <div class="class">not-last</div> <div class="class">last-in-group</div> <div>---</div> <div class="class">not-last</div> <div class="class">last-in-group</div> <div>---</div> <div class="class">last-class</div> <div>---</div> </div>

2023-01-22 13:39:10

有两种方法选择类的最后一个元素。

将元素包装在容器元素中。

html:

<div class="container">
  <div class="member">Member</div>
  <div class="member">Member</div>
  <div class="member">Member</div>
<div>

css:

.container:last-child {
  color: red;
}

如果您不想将您的元素包装在另一个元素中，那么您可以利用最后类型。

html:

<div class="member">Member</div>
<div class="member">Member</div>
<div class="member">Member</div>

css:

.member:last-of-type{
 color: red;
}

2022-07-20 17:59:44

我认为在这里应该评论一下对我有用的东西:

在需要的地方多次使用: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

:last-child只在相关元素是容器的最后一个子元素时才有效，而不是特定类型元素的最后一个子元素。为此，您需要:last-of-type

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

根据@BoltClock的注释，这只是检查最后一个article元素，而不是带有.comment类的最后一个元素。

2011-09-04 08:17:03

我怎么能选择一个特定的类的最后一个元素，而不是父里面的最后一个孩子?

推荐文章

最新文章

标签