Question

我一直在尝试添加第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>

Answer 1

要获得此配置所需的效果，您必须将第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>

Answer 2

.progress .progress-bar：nth-child（odd）{background：green; } 试试这个 $（“。progress-bar：nth-child（odd）”）。css（“background”，“red”）;

如何选择第n个孩子（奇数） - 不是直接的孩子？

2 个答案: