替代div背景颜色

问题描述

| 我的结构如下：

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

并在整个动态页面中重复几次。我想用两种颜色替换div类“ post”的背景颜色，但是CSS的nth-child伪类似乎只能用于直接顺序的项​​目。 有没有一种方法（CSS，Javascript，jQuery等）可以替换div背景颜色？     

解决方法

        jQuery的：odd和：even选择器非常方便：

$(\".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\";
}

    ,        jQuery的方式：

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

    ,        通常，我要做的是在后端分配一个css类“ odd”或“ even”。例如，如果页面是用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; }

    ,        可以很容易地用jQuery

:odd

和

:even

选择器完成：

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

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

.post:nth-child(odd)

不适合您吗？     ,        

:even Selector

http://api.jquery.com/even-selector/ 我希望这会帮助你