使用 :nth-child(odd/even)
伪类可以很容易地为具有交替背景的列表和行设置样式,但是如果您尝试将它应用于嵌套列表,它开始看起来很丑。
我的问题是,是否有任何方法可以按深度/层次交替,例如,父元素颜色与子元素无限交替。例如:
- 红色
- 蓝色
- 蓝色
- 红色
- 红色
- 蓝色
- 红色
- 蓝色
最佳答案
简短的回答,没有。长答案,是的,通过定位嵌套元素,例如:
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 来实现,通过沿着树向下走并递增计数器,在计数器为奇数或偶数时应用样式。
关于css - 使用 CSS 斑马条纹嵌套列表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9867471/