CSS类最后一个类型的子类为另一种颜色。

Question

我在用类.active子.progress-indicator绘制不同颜色的最后一个元素时遇到了问题。

此选择器不能正常工作：.progress-step.active:last-of-type .progress-indicator。

当它获得类.progress-step时，它选择最后一个.active (数字4)。

在我的情况下我该怎么做？

这是我的CodepPen示例：https://codepen.io/Liohich/pen/QWgqmRz

Answer 1

不幸的是，:last-of-type不适用于选择类，而应该应用于元素类型。您可以使用JavaScript实现您想要的样式。

在我的解决方案中，我将类last添加到单击的.progress-indicator中。

.progress-step.active.last .progress-indicator {
  background-color: blue;
}

$('.progress-step').click(function() {
    $('.progress-step').removeClass('last');  
    $(this).toggleClass('last');
});