Question

我有一个动态循环的div。我想要的是每个新行应该有替代颜色，即第一行的div bg将是白色，第二行的div bg将以灰色为背景。

这里是html

<div class="container serchcntent"> <!-- bg color change in his div-->
          <div class="row">
              <div class="col-md-3 col-sm-3 col-xs-12">
                  <div class="serbg">
                      <div class="serhead">Institute</div>
                      <span class="institute_name">Yak Group</span>
                  </div>
              </div>
              <div class="col-md-3 col-sm-3 col-xs-12">
                  <div class="serbg">
                      <div class="serhead">Date</div>
                      <span class="start_date">08/Feb/2017</span>
                      <div class="subheadsp"><span class="duration">2Days</span></div>
                  </div>
              </div>
              <div class="col-md-3 col-sm-3 col-xs-12">
                  <div class="serbg">
                      <div class="serhead">Place</div>
                      <span class="venue">Mubai</span>
                  </div>
              </div>
              <div class="col-md-3 col-sm-3 col-xs-12 ss">
                  <div class="serbg">
                      <div class="serhead">Course Fee</div>
                      <span class="fee"></span>
                      <div class="subhead"></div>
                      <a href="" class="book_now" batch-id="">Book Now</a>
                  </div>
              </div>

          </div>
      </div>

Answer 1

这是给你的代码。您将获得行的替代颜色。

.col-md-3 {
      background: #fff;
  }
  .col-md-3:nth-child(2n) {
      background: #ccc;
  }

<div class="container serchcntent"> <!-- bg color change in his div-->
  <div class="row">
      <div class="col-md-3 col-sm-3 col-xs-12">
          <div class="serbg">
              <div class="serhead">Institute</div>
              <span class="institute_name">Yak Group</span>
          </div>
      </div>
      <div class="col-md-3 col-sm-3 col-xs-12">
          <div class="serbg">
              <div class="serhead">Date</div>
              <span class="start_date">08/Feb/2017</span>
              <div class="subheadsp"><span class="duration">2Days</span></div>
          </div>
      </div>
      <div class="col-md-3 col-sm-3 col-xs-12">
          <div class="serbg">
              <div class="serhead">Place</div>
              <span class="venue">Mubai</span>
          </div>
      </div>
      <div class="col-md-3 col-sm-3 col-xs-12 ss">
          <div class="serbg">
              <div class="serhead">Course Fee</div>
              <span class="fee"></span>
              <div class="subhead"></div>
              <a href="" class="book_now" batch-id="">Book Now</a>
          </div>
      </div>

  </div>
</div>

Answer 2

您可以使用:nth-child(odd)或:nth-child(even)选择器

.serchcntent {
      background: #fff;
  }
.serchcntent:nth-child(odd) {
    background: #ccc;
}

<div class="container serchcntent"> <!-- bg color change in his div-->
  <div class="row">
      <div class="col-md-3 col-sm-3 col-xs-12">
          <div class="serbg">
              <div class="serhead">Institute</div>
              <span class="institute_name">Yak Group</span>
          </div>
      </div>
      <div class="col-md-3 col-sm-3 col-xs-12">
          <div class="serbg">
              <div class="serhead">Date</div>
              <span class="start_date">08/Feb/2017</span>
              <div class="subheadsp"><span class="duration">2Days</span></div>
          </div>
      </div>
      <div class="col-md-3 col-sm-3 col-xs-12">
          <div class="serbg">
              <div class="serhead">Place</div>
              <span class="venue">Mubai</span>
          </div>
      </div>
      <div class="col-md-3 col-sm-3 col-xs-12 ss">
          <div class="serbg">
              <div class="serhead">Course Fee</div>
              <span class="fee"></span>
              <div class="subhead"></div>
              <a href="" class="book_now" batch-id="">Book Now</a>
          </div>
      </div>

  </div>
</div>
<div class="container serchcntent"> <!-- bg color change in his div-->
  <div class="row">
      <div class="col-md-3 col-sm-3 col-xs-12">
          <div class="serbg">
              <div class="serhead">Institute</div>
              <span class="institute_name">Yak Group</span>
          </div>
      </div>
      <div class="col-md-3 col-sm-3 col-xs-12">
          <div class="serbg">
              <div class="serhead">Date</div>
              <span class="start_date">08/Feb/2017</span>
              <div class="subheadsp"><span class="duration">2Days</span></div>
          </div>
      </div>
      <div class="col-md-3 col-sm-3 col-xs-12">
          <div class="serbg">
              <div class="serhead">Place</div>
              <span class="venue">Mubai</span>
          </div>
      </div>
      <div class="col-md-3 col-sm-3 col-xs-12 ss">
          <div class="serbg">
              <div class="serhead">Course Fee</div>
              <span class="fee"></span>
              <div class="subhead"></div>
              <a href="" class="book_now" batch-id="">Book Now</a>
          </div>
      </div>

  </div>
</div>

或

.color {
  background:grey
}
.color:nth-child(even) {
  background:#fff;
}

<div class="color">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
</div>

<div class="color">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
</div>

or

<div class="color">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
</div>

<div class="">
div without color class

</div>

更改div的颜色（备用行）

2 个答案: