斑马条带化嵌套列表与CSS

Question

使用:nth-child(odd/even)伪类对交替背景的列表和行进行样式设置很容易，但如果尝试将其应用于嵌套列表，则会开始看起来很可怕。

我的问题是，有没有办法按深度/层次结构交替，例如，父颜色与子元素无限期交替。例如：

• 红
  • 蓝色
  • 蓝色
    • 红色
    • 红
      • 蓝色
    • 红色
  • 蓝色

jsfiddle

Answer 1

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

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，通过走下树并递增计数器，在计数器奇数或偶数时应用样式。

Answer 2

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