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>

我想选择活动课程之前的所有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>

Answer 2

我不知道在特定兄弟姐妹之前的兄弟姐妹元素的任何CSS选择器。但是，在您的特定情况下，您可以通过选择不带有“活动”类的元素来获得所需的结果。

类似的东西：

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

如何选择特定班级之前的兄弟姐妹？

2 个答案: