在多级列表中设置每个其他级别的样式

Question

有没有办法在多级列表中为每个其他级别设置样式？

例如，制作下面的代码

<ul>
    <li>Normal
        <ul>
            <li>Italic
                <ul>
                    <li>Normal
                        <ul>
                            <li>Italic
                                <ul>
                                    <li>Normal
                                        <ul>
                                            <li>Italic
                                            </li>
                                        </ul>
                                    </li>
                                </ul>
                            </li>
                        </ul>
                    </li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

看起来像

• 正常
  • 斜体
    • 正常
      • 斜体
        • 正常
          • 斜体

无需为每个级别指定规则。

Answer 1

我认为你的名单不是无限深度，所以你可以做这样的事情，虽然很笨拙;

ul,
ul ul ul,
ul ul ul ul ul {
    font-style: normal;
}
ul ul,
ul ul ul ul,
ul ul ul ul ul ul {
    font-style: italic;
}

Answer 2

如果您可以假定最大限制（即从不超过N深度）并且限制不会过多，那么@xec's answer是一个不错的选择。

如果您的标记是动态的（例如数据驱动），那么请在生成时考虑应用类名：

HTML：

<ul class="menu-depth-odd">
    <li>
        <ul class="menu-depth-even">
            <li>
                <ul class="menu-depth-odd">
                    ...
                </ul>
            </li>
        </ul>
    </li>
</ul>

CSS：

ul.menu-depth-odd>li {
    font-style: normal;                
}
ul.menu-depth-even>li {
    font-style: italic;        
}