Zebra-striping nested lists with CSS

问题

It's easy to style lists and rows with alternating backgrounds using the the :nth-child(odd/even) pseudo-classes, but if you try to apply it to nested lists, it starts to look hideous.

My question is, is there any way to alternate by depth / hierarchy, where, for example, a parent color alternates with the child elements' indefinitely. Eg:

• red
  • blue
  • blue
    • red
    • red
      • blue
    • red
  • blue

jsfiddle

回答1:

Short answer, no. Long answer, yes, by targeting the nested items, eg:

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}

But beyond 2 or three levels you're probably going to need a lot of rules.

You could do it with javascript as well, by walking down the tree and incrementing a counter, applying the style when the counter is odd or even.

回答2:

BAM! http://jsfiddle.net/taEgL/

来源：https://stackoverflow.com/questions/9867471/zebra-striping-nested-lists-with-css