Javascript 如何在特定类之前选择以前的同级？

我的react应用程序正在创建步骤列表：

let steps = this.props.formSteps.map((step, i) => {
            let stepNum = i +1;
            return (
                <li className={ i == this.props.currentStepsIndex ? "steps__step active" : "steps__step"} key={"li-"+i}
                 onClick={this.handleClick.bind(this, i)}>
                  {step.name}
                </li>
            );
})
return(
  <div className="steps-container">
    <ul className="steps">
      {steps}
    </ul>
  </div>
);

let steps=this.props.formSteps.map（（步骤，i）=>{
设stepNum=i+1；
返回(

{step.name}

);
})
返回(

{steps}

);

通过3个步骤，生成的html如下所示：

<ul class="steps">
  <li class="steps__step">Step 1</li>
  <li class="steps__step">Step 2</li>
  <li class="steps__step active">Step 3</li>
</ul>

步骤1
步骤2
步骤3

我想选择活动类之前的所有li步骤，并将背景设置为绿色或其他颜色

---

如何使用css实现这一点？

您可以这样做。反转逻辑并选择所有下一个同级以删除背景：

。步骤{
背景：绿色；
}
.主动，
.active~.steps\uu步骤{
背景：无；
}

步骤1
步骤2
步骤3
步骤4
步骤5

我不知道在特定同级元素之前有任何用于同级元素的css选择器。但是，在您的特定情况下，您可以通过选择没有“活动”类的元素来获得所需的结果

比如：

.steps__step:not(.active) {
   background-color: green;
}

---

这个方法非常有效！这比在JavaScript中加入更多的逻辑要好。请参阅@Temani Afif提供的更完整的答案，以仅对位于“active”元素之前的元素进行样式化。