【发布时间】：2018-01-26 00:32:04
【问题描述】：
使用:nth-child(odd/even) 伪类可以很容易地设置具有交替背景的列表和行的样式，但是如果您尝试将其应用于嵌套列表，它开始看起来很糟糕。
我的问题是，有没有办法按深度/层次结构进行交替，例如，父颜色与子元素无限地交替。例如：
- 红色
- 蓝色
- 蓝色
- 红色
- 红色
- 蓝色
- 红色
- 蓝色
【问题讨论】：
标签： css pseudo-class
【发布时间】：2018-01-26 00:32:04
【问题描述】：
简短的回答，不。长答案，是的，通过定位嵌套项目，例如：
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 来做到这一点，沿着树向下走并增加一个计数器，当计数器是奇数或偶数时应用样式。
【讨论】：
-
哦，是的，js 会更容易。 if (color == "green") { color = red; } 其他 { 颜色 = 绿色； } 完成。
【讨论】：
-
不完全是我的想法，因为您仍然可以让第一个孩子与父母的颜色相同：jsfiddle.net/aqTwZ
-
是的，因为您添加了一个图层。您必须为每一层添加规则，就像提到的 SpliFF 一样。但是，嘿，我做了你给我的例子。
-
是的，很抱歉——这个例子应该更深入一些层次，但我想我忘了保存在 jsfiddle 中。无论如何，谢谢。