css - 为多级列表中的每个其他级别设置样式

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 的答案是一个不错的选择。

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

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;        
}