Вложенные списки с разбивкой по зебре с помощью CSS - PullRequest
Новая
       4

Вложенные списки с разбивкой по зебре с помощью CSS

2 голосов
/ 26 марта 2012

Легко стилизовать списки и строки с чередующимися фонами, используя псевдоклассы :nth-child(odd/even), но если вы попытаетесь применить его к вложенным спискам, он начнет выглядеть отвратительно.

Мой вопрос таков:Есть ли способ чередования по глубине / иерархии, где, например, родительский цвет чередуется с дочерними элементами бесконечно.Например:

  • красный
    • синий
    • синий
      • красный
      • красный
        • синий
      • красный
    • синий

jsfiddle

Ответы [ 2 ]

6 голосов
/ 26 марта 2012

Краткий ответ, нет.Длинный ответ, да, нацеливаясь на вложенные элементы, например: 

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}

Но за пределами двух или трех уровней вам, вероятно, понадобится много правил.

Вы можете сделать этотакже с помощью javascript, спускаясь по дереву и увеличивая счетчик, применяя стиль, когда счетчик нечетный или четный.

1 голос
/ 26 марта 2012
...