進度條在第1步未激活

我對編碼很陌生，我想在我的網站上添加一個進度條。但是當我想讓 step1“激活”時，它是激活的 step2（當我激活第 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
   }

我該怎么做才能讓它發揮作用？

uj5u.com熱心網友回復：

當我將.progressbar li.active li:beforecss 中的樣式定義更改為 時.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>

標籤：

上一篇：使用megaparsec parser-combinators進行置換決議過于寬松

下一篇：ReactJs-為什么在沒有箭頭函式的情況下使用括號呼叫onDelete()不起作用？