进度条在第 1 步未激活

Question

我是编码新手，我想在我的网站上添加一个进度条。但是，当我想让第 1 步“激活”时，激活的是第 2 步（当我激活第 2 步时，激活的是第 3 步，依此类推）

            <div id="fh5co-work">
                <div class="row">
                    <div class="col-md-8">
            <div class="root">
                <div class="container">
                     <ul class="progressbar">
                        <li class="active">Step 1</li>
                        <li>Step 2</li>
                        <li>Step 3</li>
                        <li>Step 4</li>
                        <li>Step 5</li>
                     </ul>
                 </div>
            </div>

这是 bootstrap.css 中的 css 代码：

.container{
  width: 140%;
  position: absolute;
  z-index: 1;
}
.progressbar li{
  float: left;
  width: 20%;
  position: relative;
  text-align: center;
}

.progressbar li:before{
  content:"1";
  width: 30px;
  height: 30px;
  border: 2px solid #bebebe;
  display: block;
  margin: 0 auto 10px auto;
  border-radius: 50%;
  line-height: 27px;
  background: white;
  color: #bebebe;
  text-align: center;
  font-weight: bold;
}

.progressbar{
  counter-reset: step;
}
.progressbar li:before{
  content:counter(step);
  counter-increment: step;
  width: 30px;
  height: 30px;
  border: 2px solid #bebebe;
  display: block;
  margin: 0 auto 10px auto;
  border-radius: 50%;
  line-height: 27px;
  background: white;
  color: #bebebe;
  text-align: center;
  font-weight: bold;
}

.progressbar li:after{
  content: '';
  position: absolute;
  width:100%;
  height: 3px;
  background: #37606f;
  top: 15px;
  left: -50%;
  z-index: -1;
}

.progressbar li:first-child:after{
  content: none;
  }

  .progressbar li.active + li:after{
    background: #37606f;
   }
   .progressbar li.active + li:before{
   border-color: #37606f;
   background: #37606f;
   color: white
   }

我该怎么做才能让它发挥作用？

Answer 1

当我将 css 中的样式定义 .progressbar li.active + li:before 更改为 .progressbar li.active:before 时，问题就消失了。

.container{
  width: 140%;
  position: absolute;
  z-index: 1;
}

.progressbar li{
  float: left;
  width: 20%;
  position: relative;
  text-align: center;
}

.progressbar li:before{
  content:"1";
  width: 30px;
  height: 30px;
  border: 2px solid #bebebe;
  display: block;
  margin: 0 auto 10px auto;
  border-radius: 50%;
  line-height: 27px;
  background: white;
  color: #bebebe;
  text-align: center;
  font-weight: bold;
}

.progressbar{
  counter-reset: step;
}
.progressbar li:before{
  content:counter(step);
  counter-increment: step;
  width: 30px;
  height: 30px;
  border: 2px solid #bebebe;
  display: block;
  margin: 0 auto 10px auto;
  border-radius: 50%;
  line-height: 27px;
  background: white;
  color: #bebebe;
  text-align: center;
  font-weight: bold;
}

.progressbar li:after{
  content: '';
  position: absolute;
  width:100%;
  height: 3px;
  background: #37606f;
  top: 15px;
  left: -50%;
  z-index: -1;
}

.progressbar li:first-child:after{
  content: none;
}

.progressbar li.active + li:after{
  background: #37606f;
 }
 
.progressbar li.active:before{
   border-color: #37606f;
   background: #37606f;
   color: white
 }

<div id="fh5co-work">
  <div class="row">
    <div class="col-md-8">
      <div class="root">
        <div class="container">
           <ul class="progressbar">
              <li class="active">Step 1</li>
              <li>Step 2</li>
              <li>Step 3</li>
              <li>Step 4</li>
              <li>Step 5</li>
           </ul>
         </div>
      </div>
    </div>
  </div>
</div>

进度条在第 1 步未激活

Progress bar doesn't get active at step 1

html

css

web

progress-bar