如何 select 具有特定 class 的最后一个元素？

Question

我想 select 最后一个 class 为 .completed 的元素。我该怎么做？

这是我的 HTML:

<div class="steps">
    <div class="progress completed"></div>
    <div class="progress completed"></div>
    <div class="progress"></div>
    <div class="progress"></div>
</div>

我试过使用这个：

.progress.completed:last-of-type {
    background-color: #ccc;
}

但是没用。

Answer 1

最好将 class 分配给最后出现的项目。

要以编程方式执行此操作，我们可以使用 querySelectorAll 获取所有项目的列表，从中我们可以获取最后一个元素并向其添加 class。

[...document.querySelectorAll('.progress.completed')].slice(-1)[0].classList.add('last-item');

.last-item{
  background-color:#ccc;
}

<div class="steps">
  <div class="progress completed">a</div>
  <div class="progress completed">a</div>
  <div class="progress">a</div>
  <div class="progress">a</div>
</div>

Answer 2

CSS 在目前的状态下没有（好的）方法来解决这个问题。最好的解决方案是在 javaScript 或 jQuery.

的帮助下，将额外的 class 添加到最后完成的 div

JavaScript 或 jQuery 将找到父级的最后一个子级并让您能够通过添加 classes 和样式来更改它。

.last{
    background-color: #ccc;
}

和jQuery

$(".progress.completed").last().addClass("last");

如何 select 具有特定 class 的最后一个元素？

How to select the last element that has a specific class?

html

css

responsive-design