Wordpress 的评论模板部分都会定义一个$oddcomment 函数用来实现评论的样式交替变换，采取交替样式可以使列表有一定分区度，便于浏览。我稍稍总结了下，分别通过 javascript, php 和 CSS 三种方式进行实现，其中 CSS 实现方法还几乎处于理想状态，仅供参考。

实现方法之 Javascript 篇

假设我们有个 id 名为 list 的无序列表 ul，其下有 5 项 item (li)。我们可以用 getElementById 和 getElementsByTagName 先找到这些 item，然后通过 for 循环筛选出奇数项并赋予 class 值。再通过 CSS 定义该奇数项 class 样式从而达到交替样式的目的。javascript 代码如下:

 function alterItem() {
 var list=document.getElementById('list');
 var items=list.getElementsByTagName('li'); 
 for (var i=0;i<items.length;i++) {
   if(i%2==0)
   items[i].className='odd'; 
   }
 }

 window.onload=alterItem;

最后用通过 CSS 定义 .odd 样式就行了。

实现方法之 PHP 篇

此方法来源于 Wordpress 论坛的这篇日志。我曾经在 PP 的 sidenotes 部分就是用这种方法实现交替背景的 (WP 的 comment 部分已经有 oddcomment 函数了，无须再费周折 )，我直接照搬原来 PP theme 里的 sidenotes 部分代码。

<?php query_posts('category_name=sidenotes&showposts=3'); ?>
     <?php while (have_posts()) : the_post(); ?>
     <div id="p<?php the_ID(); ?>" class="<?=($i%2)?"even":"odd";$i++;?>">
     <a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php strip_tags(the_title()); ?>" class="title"><?php the_title(); ?></a>
     <?php the_content(); ?>
     </div>
<?php endwhile;>

注意其中加粗部分，先在模板文件顶部插入如下代码 <?$i;?>，然后在 class 里加入这句判断语句就够了 <?=($i%2)?"even":"odd";$i++;?>。学过 C 语言的都知道这是个 if..else 判断语句的缩写形式— If (Expression) ? true : false，如果满足表达式，则执行? 部分，否则执行 : 部分。也就是说，满足 $i%2 等于 0，即$i 为偶，则赋予 class 为 even 值，然后$i 加一，滚动到下一 item 上进行第二次判断。

实现方法之 CSS 篇

CSS2 有个:nth-child 的选择器，这是个非常非常强大的选择器，你可以定义 Element:nth-child(3) 来找到为其父元素下的第三个子元素，你也可以定义 Element:nth-child(odd) 或者 Element:nth-child(even) 来查找其父元素下的奇偶子元素，甚至可以用 Element:nth-child(3n+2) 来找到其父元素下的第 3n+2 个元素 ( n=0,1,2…)。通过 CSS 方法定义那太简单了!

ul#list li:nth-child(odd) {background:#000;color:#fff}

ul#list li:nth-child(even) {background:#fff;color:#000;}

不过，这么好的方法…目前只有 linux 下的 konqueror 浏览器支持 ( 注:Konqueror 是目前唯一 100%通过 CSS3 所有选择器测试 的浏览器 )，好在 Opera 已经开始 落实支持该选择器的工作 了。

我个人比较喜欢这种 cutting edge 的方式! 如果你想让你的网站/blog 做的更先锋的话就用这种方式吧!

顺带说句: 其实 linux 下的 konqueror 是款相当棒的浏览器，他们对 CSS 的支持一向都是做的最棒的 ( 目前还有个 opacity 没解决 )，连 multiple-backgrounds 他们都支持了!