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

Question

Answer 1

:last-child

仅当相关元素是容器的最后一个子元素而不是特定类型元素的最后一个时才起作用。为此，您想要

:last-of-type

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

根据 @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>

Answer 2

我猜最正确的答案是：使用

:nth-child

（或者，在这种特定情况下，使用其对应的

:nth-last-child

）。大多数人只知道这个选择器的第一个参数是基于 n 的计算来获取一系列项目，但它也可以采用第二个参数“of [any CSS 选择器]”。

您的场景可以使用此选择器来解决：

.commentList .comment:nth-last-child(1 of .comment)

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

进一步阅读：

Answer 3

现在可以通过仔细使用

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

如果要浮动元素，则可以颠倒顺序

Answer 4

即

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>

新的

Answer 5

伪类（尚未受所有浏览器支持）让您非常接近解决方案：

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

限制是，这将找到任何带有

.class

的元素，后跟不具有此类的元素。但这与问题的用例相匹配。

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

Answer 6

在需要的地方多次使用

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

Answer 7

经过一番搜索，我发现了这个。

在 Chrome、Firefox Edge 和 Safari 中运行良好，未在其他浏览器中测试

    /* target first element with class ".comment" */
    :nth-child(1 of .comment) {
        background-color: red;
    }

    /* target last element with class ".comment" */
    :nth-last-child(1 of .comment) {
        background-color: red;
    }

<div class="commentList">
 <div class="something"> hello </div>
 <article class="comment " id="com21">test</article>
 <article class="comment " id="com20">test</article>
 <article class="comment " id="com19">test</article>
 <div class="something"> hello </div>
</div>

这个解决方案怎么样？

Answer 8

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

HTML：

Answer 9

<div>
   <div class="group_1">1</div>
   <div class="group_1">2</div>
   <div class="group_1">3</div>

   <div class="group_2">4</div>
   <div class="group_2">5</div>

   <div class="group_1">6</div>
   <div class="group_1">7</div>
   <div class="group_1">8</div>

   <div class="group_2">9</div>
   <div class="group_2">10</div>
</div>

CSS：

.group_1:has(+ :not(.group_1), .group_1:last-of-type {color: red;}
.group_2:has(+ :not(.group_2), .group_2:last-of-type {color: blue;}

红色

：3、8

蓝色：5、10

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

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

如果您不想将元素包装在另一个元素中，那么您可以利用

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

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

问题描述投票：0回答：10

10个回答

最新问题

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

问题描述 投票：0回答：10

10个回答

最新问题

问题描述投票：0回答：10