斑马条纹嵌套列表与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,沿着树走下来并递增计数器,在计数器奇数或偶数时应用样式.