如何选中.progress容器中带done类的最后一个元素并设置样式？

你需要给.progress容器中最后一个带有done类的.progress-item元素（即第三个<div>）添加红色背景和绿色边框，但之前尝试的选择器失效，核心原因是CSS的:last-of-type伪类基于元素类型而非类匹配，不会识别类的最后一个实例。

原有选择器失效的原因 #

• .progress .done:last-of-type：该选择器会查找父元素中属于最后一个同类型元素且带done类的元素。但你的.progress容器里，第三个带done的<div>后面还有多个<div>元素（4、5、6号），它不是父元素里最后一个<div>，因此不会被选中。
• .progress > div.done:last-of-type：同理，父元素里最后一个<div>是第6个，它没有done类，也不匹配。

解决方案 #

方法1：使用:has()伪类（现代浏览器支持）

:has()能基于兄弟元素的存在来筛选目标，我们可以匹配后面没有其他.progress-item.done兄弟元素的项，也就是最后一个带done的.progress-item：

p {
  margin: 0;
}

.progress {
  background-color: yellow;
}

.progress .progress-item {
  background-color: grey;
}

.progress .progress-item.done {
  background-color: blue;
}

/* 选中最后一个带done的.progress-item */
.progress .progress-item.done:not(:has(~ .progress-item.done)) {
  background-color: red;
  border: 4px green solid;
}

方法2：兼容旧浏览器的JS方案

如果需要支持不兼容:has()的旧浏览器，可通过JS定位目标元素并添加样式：

const progressContainer = document.querySelector('.progress');
const doneItems = progressContainer.querySelectorAll('.progress-item.done');
const lastDoneItem = doneItems[doneItems.length - 1];
if (lastDoneItem) {
  lastDoneItem.style.backgroundColor = 'red';
  lastDoneItem.style.border = '4px green solid';
}

测试用HTML（保持不变） #

<div class="progress">
  <div class="progress-item done">1</div>
  <div class="progress-item done">2</div>
  <div class="progress-item done">3</div>
  <div class="progress-item">4</div>
  <div class="progress-item">5</div>
  <div class="progress-item">6</div>
  <p>7</p>
  <p class="progress-item">8</p>
</div>

内容的提问来源于stack exchange，提问作者Shivam Singla