使用CSS的斑马条纹嵌套列表

使用:nth-child(odd/even)伪类很容易使用交替背景对列表和行进行样式设置，但是如果尝试将其应用于嵌套列表，它会显得很丑。使用CSS的斑马条纹嵌套列表

我的问题是，有没有什么方法可以根据深度/层次结构进行交替，例如，父级颜色会无限期地与子元素交替出现。例如：

2012-03-26 Greg

简答题，没有。很长的回答，是的，通过锁定嵌套项目，例如：

li:nth-child(odd) {background:blue} 
li:nth-child(odd) li:nth-child(even) {background:blue} 
li:nth-child(even) li:nth-child(odd) {background:blue}

但是，超过2或3个级别，你可能会需要很多的规则。

你也可以用javascript来做到这一点，通过走下树并递增计数器，当计数器是奇数或偶数时应用样式。

2012-03-26 06:35:17 SpliFF

哦，雅，会更方便。如果（color ==“green”）{color = red; } else {color = green;完成。 – user1289347 2012-03-26 06:37:16

无赖。谢谢！ – Greg 2012-03-26 06:41:29

2012-03-26 06:34:37 user1289347

不完全是我想到的，因为你仍然可以有第一个孩子与父母相同的颜色：http://jsfiddle.net/aqTwZ/ – Greg 2012-03-26 06:37:25

是因为你添加了一个图层。您将不得不为每个图层添加规则，例如SpliFF提到的。但是，嘿，我做了你给我工作的例子。 – user1289347 2012-03-26 06:44:21

是的，对不起 - 这个例子应该更深入一些层次，但我想我忘了保存在jsfiddle中。不管怎么说，还是要谢谢你。 – Greg 2012-03-26 06:46:00

回答