我对自己创建的进度条感到困惑。
我希望进度条在将类设置为“事件”后将其背景颜色更改为蓝色。但是我希望进度条在类设置为“事件”之前更改其背景颜色。
这是我的 HTML:
<ul class="progressBar">
<li class="active">Beong Processed</li>
<li class="active">Waiting for payment</li>
<li>Paid</li>
</ul>
……和 CSS:
.progressBar li.active {
color: dodgerblue;
}
.progressBar li.active:before {
border-color: dodgerblue;
background-color: dodgerblue
}
.progressBar li.active + li:after {
background-color: dodgerblue;
}
结果是这样的
我希望它是这样的
最佳答案
使用 .progressBar .active:after
而不是 .progressBar li.active + li:after
+ 在 css 中
It is Adjacent sibling combinator. It combines two sequences of simple selectors having the same parent and the second one must come IMMEDIATELY after the first.
.wrapper-progressBar {
width: 100%
}
.progressBar {
}
.progressBar li {
list-style-type: none;
float: left;
width: 33%;
position: relative;
text-align: center;
}
.progressBar li:before {
content: " ";
line-height: 30px;
border-radius: 50%;
width: 30px;
height: 30px;
border: 1px solid #ddd;
display: block;
text-align: center;
margin: 0 auto 10px;
background-color: white
}
.progressBar li:after {
content: "";
position: absolute;
width: 100%;
height: 4px;
background-color: #ddd;
top: 15px;
left: -50%;
z-index: -1;
}
.progressBar li:first-child:after {
content: none;
}
.progressBar li.active {
color: dodgerblue;
}
.progressBar li.active:before {
border-color: dodgerblue;
background-color: dodgerblue
}
.progressBar .active:after {
background-color: dodgerblue;
}
<div class="row">
<div class="col-xs-12 col-md-8 offset-md-2 block border">
<div class="wrapper-progressBar">
<ul class="progressBar">
<li class="active">Beong Processed</li>
<li class="active">Waiting for payment</li>
<li>Paid</li>
</ul>
</div>
</div>
</div>
关于html - Stepper 纯 HTML CSS,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51960933/