6

例如我们 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 的背景颜色？

4

5 回答 5

10

CSS3 - 不能在 IE8 等旧版浏览器中运行

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

也适用于 IE8 的jQuery

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

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

这是CSS3 和 jQuery 的 DEMO

$("#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>

于 2012-10-22T05:09:01.087 回答
7

如果您出于某种原因想要一个 javascript 选项（也许您希望做的不仅仅是一个类？）您可以在 jquery 中使用 each() 函数。这是一个启动的有效示例！

CSS

.redBox{
    background-color: #ff0000;
}​

Javascript

var i = 0;
$(".child").each(function(i){
    if(i%2===0){
        $(this).addClass("redBox");
    }
    i++;
});
于 2012-10-22T05:19:53.393 回答
6

尝试nth-child 演示 

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

div{
 background: red;
}
于 2012-10-22T05:08:56.127 回答
2

只用 CSS 做？

#container child:nth-child(even) {background: #CCC}
于 2012-10-22T05:08:51.490 回答
2

您还可以使用 CSS3 nth-child 选择器。你可以在这里找到样品

于 2012-10-22T05:11:53.463 回答