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");

Answer 2

除了Myles的回答，您还可以使用css3选择器来选择奇数元素。

li.comment:nth-child(2) { background:gray; }

大多数现代浏览器都支持它，除了IE8（虽然IE9应该支持它。）

样式化嵌套列表元素

2 个答案: