javascript - 如何在特定类(class)之前选择 previous sibling 姐妹？

Question

我的 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>
);

通过 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>

我想把active类之前的所有li步骤都选上，然后把背景设置成绿色之类的。

如何使用 css 完成此操作？

Answer 1

你可以这样做。您反转逻辑并选择所有下一个兄弟以删除背景:

.steps__step {
 background:green;
}

.active,
.active ~ .steps__step {
 background:none;
}

<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>
  <li class="steps__step">Step 4</li>
  <li class="steps__step">Step 5</li>
</ul>