我一直在尝试添加第n个子选择器,因此每个奇数元素(div class =“progress-bar”)都有不同的bg颜色。但是,我只能改变div类进度的颜色。不知何故,我不知道如何达到我需要的那个。
<div class="col-sm">
<h2 class="progress_h2_one"> progress</h2>
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<h2 class="progress_h2"> progress</h2>
<div class="progress">
<div class="progress-bar" role="progressbar" style="width: 25%" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<h2 class="progress_h2"> progress</h2>
<div class="progress">
<div class="progress-bar" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<h2 class="progress_h2"> progress</h2>
<div class="progress">
<div class="progress-bar" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
答案 0 :(得分:0)
要获得此配置所需的效果,您必须将第n个声明添加到'progress'类。
或者您可以将所有'progress-bar'类包装在同一个父div中
<div class='progress'>
<div class='progress-bar'/>
<div class='progress-bar'/>
<div class='progress-bar'/>
<div class='progress-bar'/>
</div>
答案 1 :(得分:0)
.progress .progress-bar:nth-child(odd){background:green; } 试试这个 $(“。progress-bar:nth-child(odd)”)。css(“background”,“red”);