我想最正确的答案是:使用: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

新的:has()伪类(尚未被所有浏览器支持)让你非常接近解决方案:

.class:has(+ :not(.class))

限制在于，它将找到任何带有.class且后面跟着一个不具有此类的元素。但这将与问题的用例相匹配。

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

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

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

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

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

现在可以通过使用: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>

我想最正确的答案是:使用: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