如何选择具有特定类的最后一个元素，而不是父类中的最后一个子元素？

小开

最佳答案

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

小开

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

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

这实际上只是将类应用到LAST实例，因为它现在的顺序颠倒了。

下面是一个适用的例子:

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

小开

这个解呢?

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

小开

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

小开

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

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

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

如果你不想将你的元素包装在另一个元素中，那么你可以利用last-of-type。

html:

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

css:

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

小开

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

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

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