jquery - 样式化嵌套列表元素

Question

我想为列表中的备选元素设置样式，背景颜色为灰色。但是，如果有嵌套的 li 元素，样式就会出错，嵌套列表中的连续元素会被设置为相同颜色的灰色。

关于如何使用 css/jquery 将它们设置为交替灰色样式，甚至是嵌套样式，有什么想法吗？

编辑

<div id='wrapper'>

<ul>

<li class='comment'><div class='aut'>the_archer</div><div class='comment-body'>Test</div><div class='timestamp'>2011-02-15 17:22:11</div><a href='#comment_form' class='reply' id='7'>Reply</a><ul><li class='comment'><div class='aut'>great</div><div class='comment-body'>t</div><div class='timestamp'>2011-02-15 17:38:43</div><a href='#comment_form' class='reply' id='8'>Reply</a><ul><li class='comment'><div class='aut'>test</div><div class='comment-body'>eee</div><div class='timestamp'>2011-02-15 17:40:21</div><a href='#comment_form' class='reply' id='10'>Reply</a><ul><li class='comment'><div class='aut'>fook</div><div class='comment-body'>kkk</div><div class='timestamp'>2011-02-15 18:07:08</div><a href='#comment_form' class='reply' id='12'>Reply</a></li></ul></li><li class='comment'><div class='aut'>Anonymouse</div><div class='comment-body'>dsdsd</div><div class='timestamp'>2011-02-15 17:44:53</div><a href='#comment_form' class='reply' id='11'>Reply</a></li><li class='comment'><div class='aut'>bbbb</div><div class='comment-body'>bbbb</div><div class='timestamp'>2011-02-15 18:32:23</div><a href='#comment_form' class='reply' id='14'>Reply</a></li></ul></li><li class='comment'><div class='aut'>w</div><div class='comment-body'>www</div><div class='timestamp'>2011-02-15 17:39:29</div><a href='#comment_form' class='reply' id='9'>Reply</a></li></ul></li><li class='comment'><div class='aut'>t</div><div class='comment-body'>t</div><div class='timestamp'>2011-02-15 18:30:09</div><a href='#comment_form' class='reply' id='13'>Reply</a></li></ul>

</div>

CSS:

.comment-style{background: gray;}

Jquery

$('ul li.comment:odd').addClass('comment-style');

Answer 1

Live Demo

更改了 JQuery:

$('li.comment:odd').css("background-color", "gray");
$('li.comment:even').css("background-color", "white");