css - 使用 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 来实现，通过沿着树向下走并递增计数器，在计数器为奇数或偶数时应用样式。