इस कोड को देखते हुए,

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

.progressbar{
  counter-reset: step;
}

.progressbar li{
  float: left;
  width: 25%;
  position: relative;
  text-align: center;
  list-style:none
}

.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: #979797;
  top: 15px;
  left: -50%;
  z-index: -1;
}

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

.progressbar li.active + li::after{
 background: #3aac5d;
}
.progressbar li.active + li::before{
border-color: #3aac5d;
background: #3aac5d;
color: white
}
<div class="root">
     <div class="container">
         <ul class="progressbar">
            <li>Accept a halter and be willing to be lead</li>
			<li>Allow its feet to be picked up for cleaning or trimming</li>
			<li class="active">Stand and be willing to be groomed</li>
			<li>Be willing to load quietly in a trailer</ li>
          </ul>
     </div>
</div>

जब मैं इसे ब्राउज़र में देखता हूं, तो 'सक्रिय' वर्ग गलत तत्व से जुड़ जाता है। उदाहरण के लिए 'सक्रिय' तीसरे <li> पर है लेकिन चौथे पर प्रदर्शित होता है। पता नहीं क्यों। मुझे यकीन है कि एक सरल व्याख्या है लेकिन मुझे नुकसान हुआ है। मैं इस पर घंटों से काम कर रहा हूं और इस मुद्दे को नहीं देख सकता।

css
0
Steve Brown 4 अप्रैल 2020, 00:58
li.active + li का अर्थ है "li.active के ठीक बाद li को स्टाइल करें", इसलिए आपके मामले में, तीसरा li अगले भाई, चौथे li पर स्टाइल को ट्रिगर करता है।
 – 
chriskirknielsen
4 अप्रैल 2020, 01:02

2 जवाब

+ li का अर्थ है अगला li .. उस स्टाइल को ठीक करने के लिए जो आप करेंगे:

.progressbar li.active::after{
 background: #3aac5d;
}
.progressbar li.active::before{
border-color: #3aac5d;
background: #3aac5d;
color: white
}
0
Lynyrd 4 अप्रैल 2020, 01:05

+ चयनकर्ता का उपयोग उस तत्व का चयन करने के लिए किया जाता है जिसे निर्दिष्ट तत्व के तुरंत बाद रखा जाता है। देखें आसन्न सहोदर संयोजक

यदि आप तीसरे तत्व को रंगना चाहते हैं, तो बस प्लस चयनकर्ता को हटा दें।

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

.progressbar{
  counter-reset: step;
}

.progressbar li{
  float: left;
  width: 25%;
  position: relative;
  text-align: center;
  list-style:none
}

.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: #979797;
  top: 15px;
  left: -50%;
  z-index: -1;
}

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

.progressbar li.active::after{
 background: #3aac5d;
}
.progressbar li.active::before{
border-color: #3aac5d;
background: #3aac5d;
color: white
}
<div class="root">
     <div class="container">
         <ul class="progressbar">
            <li>Accept a halter and be willing to be lead</li>
			<li>Allow its feet to be picked up for cleaning or trimming</li>
			<li class="active">Stand and be willing to be groomed</li>
			<li>Be willing to load quietly in a trailer</ li>
          </ul>
     </div>
</div>
0
Hans Felix Ramos 4 अप्रैल 2020, 10:45