Question

我有如下结构：

<div class="wrapper"...>
   <a href="#"...>blah</a>
   <div class="post"...>stuff</div>
</div>

它在动态页面中重复几次。我想用两种颜色替换div类“post”的背景颜色，但CSS的nth-child伪类似乎只适用于直接顺序的项目。

有没有办法（CSS，Javascript，jQuery等）可以替换div背景颜色？

Answer 1

jQuery：奇数和：偶数选择器非常方便：

$(".post:even").css("background-color","blue"); 
$(".post:odd").css("background-color","red");

HTML：

<div class="wrapper">
   <a href="#">blah</a>
   <div class="post">stuff</div>
</div>
<div class="wrapper">
   <a href="#">blah</a>
   <div class="post">stuff</div>
</div>
...

http://jsfiddle.net/thomas4g/uaYd9/2/

编辑：

非jQuery，快速JS方式：

var posts = document.getElementsByClassName("post");
for(var i=0;i<posts.length;i++) {
  posts[i].classList.add(i % 2 === 0 ? "even" : "odd");
  //or
  posts[i].style["background-color"] = i % 2 === 0 ? "blue" : "red";
}

Answer 2

jquery方式：

$('.post:even').css('background-color','green');
$('.post:odd').css('background-color','red');

Answer 3

通常我所做的是在后端分配一个“奇数”或“偶数”的css类。例如，如果页面是在PHP中动态生成的，我会执行以下操作：

for ($i = 0; $i < count($rows); $i++) {
  $css_class = 'wrapper ';  // Elements can have multiple css classes
  $css_class .= $i % 2 == 0 ? 'row_odd' : 'row_even';
  // generate html using class="$css_class"...
}

然后在你的班级中定义你想要交替的div所拥有的颜色。

.row_odd { background-color: white; }
.row_even { background_color: #e0e0ff; }

Answer 4

可以非常轻松地使用jquery :odd和:even选择器完成：

$(".wrapper div.post:odd").addClass('odd'); 
$(".wrapper div.post:even").addClass('even');

http://jsfiddle.net/niklasvh/fULRZ/

Answer 5

.post:nth-child(odd)

不适合你吗？

Answer 6

:even Selector

http://api.jquery.com/even-selector/

我希望这会对你有所帮助

替代div背景颜色

6 个答案: