如何为最后一个带.active类元素的子元素.progress-indicator设置自定义颜色

你原来的选择器失效的核心是CSS中:last-of-type伪类的匹配规则是查找同级下相同标签名的最后一个元素，和元素是否带有.active类没有关联，所以只有当序号为4的最后一个.progress-step本身带有.active类时，你的选择器才会命中目标。
且CSS原生不存在直接匹配「最后一个带有指定类的同级元素」的选择器，你可以通过以下三种方案实现需求：

每次切换步骤激活状态时，先清除所有.progress-step上的特殊标记类（比如.last-active），再找到当前所有带.active的.progress-step里的最后一个，给它加上.last-active类，最后写样式即可：

// 切换激活状态后执行以下逻辑
const allActiveSteps = document.querySelectorAll('.progress-step.active');
if (allActiveSteps.length) {
  // 给最后一个激活的步骤加标记类
  allActiveSteps[allActiveSteps.length - 1].classList.add('last-active');
}

对应的CSS：

.progress-step.last-active .progress-indicator {
  /* 你要改的自定义样式 */
  background: #ff0000;
}

如果你的进度条激活逻辑是按顺序连续激活的（比如激活到第3步时，第1、2、3步都会带.active类，第4步不带），可以用现在绝大多数主流浏览器都支持的:has()伪类实现，不需要写JS：

/* 匹配下一个兄弟步骤未激活的激活步骤，即中间状态的最后一个激活项 */
.progress-step.active:has(+ .progress-step:not(.active)) .progress-indicator,
/* 匹配所有步骤全激活时的最后一个步骤 */
.progress-step.active:last-of-type .progress-indicator {
  /* 自定义样式 */
  background: #ff0000;
}

如果你的进度步骤总数固定且数量不多，可以在激活到对应步骤时，给进度条的父容器加一个对应序号的标记类，比如激活到第2步就加active-step-2，激活到第3步加active-step-3，然后分别写样式即可：

.active-step-1 .progress-step:nth-child(1) .progress-indicator,
.active-step-2 .progress-step:nth-child(2) .progress-indicator,
.active-step-3 .progress-step:nth-child(3) .progress-indicator,
.active-step-4 .progress-step:nth-child(4) .progress-indicator {
  /* 自定义样式 */
  background: #ff0000;
}

内容的提问来源于stack exchange，提问作者Alexey Cherviakov