Question

例如我们5 DIV：

<div id="container" >
  <div class="child">1</div>
  <div class="child">2</div>
  <div class="child">3</div>
  <div class="child">4</div>
  <div class="child">5</div>
</div>

如何更改偶数DIV的背景颜色？

Answer 1

CSS3 - 无法在IE8等旧浏览器中使用

#container2 > div:nth-child(even){
  background: yellow;
}

jQuery 也适用于IE8

$("#container > div:nth-child(even)").addClass("even");

我也发现了这个讨论：IE8 and jQuery selectors

这是DEMO of CSS3 and jQuery both

$("#container1 > div:nth-child(even)").addClass("even");

.even {
  background-color: yellow
}

#container2>div:nth-child(even) {
  background: yellow;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
jQuery:
<div id="container1">
  <div class="child">1</div>
  <div class="child">2</div>
  <div class="child">3</div>
  <div class="child">4</div>
  <div class="child">5</div>
</div>
<hr/> CSS3:
<div id="container2">
  <div class="child">1</div>
  <div class="child">2</div>
  <div class="child">3</div>
  <div class="child">4</div>
  <div class="child">5</div>
</div>

Answer 2

如果你出于某种原因想要一个javascript选项（也许你想做的不仅仅是一个类？）你可以在jquery中使用each（）函数。 Here是一个可以启动的功能示例！

<强> CSS

.redBox{
    background-color: #ff0000;
}

<强>的Javascript

var i = 0;
$(".child").each(function(i){
    if(i%2===0){
        $(this).addClass("redBox");
    }
    i++;
});

Answer 3

尝试nth-child demo

div:nth-child(even){
background: yellow;
}

div{
 background: red;
}

Answer 4

用CSS做吧？

#container child:nth-child(even) {background: #CCC}

Answer 5

您还可以使用CSS3 nth-child选择器。您可以在Here

上找到样本

使用javascript更改html中奇数/偶数DIV的颜色

5 个答案: