javascript - 使用嵌套级别在 CSS 中交替行颜色

Question

我正在寻找为理论上无限数量的嵌套级别实现交替行颜色的最佳方法。下面是我正在测试的标记示例和 jsFiddle http://jsfiddle.net/DFn82/

对于第 nth-child，很难让交替的颜色正确工作，您需要有效地硬编码每个级别的组合，并且 css 规则呈指数增长。

我可以使用 javascript 实现我想要的结果，但是列表是完全动态的，并且不断添加和删除内容。使用 javascript 的性能明智似乎不是一种选择，并且可能会产生一些相当大的影响。

这只需要在 IE9+ 下工作

<ul>
    <li>
        <span>Item</span>
    </li>
    <li>
        <span>Item</span>
    </li>
    <li>
        <span>Item</span>
        <ul>
            <li>
                <span>Item</span>
                <ul>
                    <li><span>Item</span></li>
                    <li><span>Item</span></li>
                    <li><span>Item</span></li>
                    <li><span>Item</span></li>
                    <li><span>Item</span></li>
                </ul>
            </li>
            <li>
                <span>Item</span>
                <ul>
                    <li><span>Item</span></li>
                    <li><span>Item</span></li>
                    <li><span>Item</span></li>
                    <li><span>Item</span></li>
                    <li><span>Item</span></li>
                </ul>
            </li>
            <li>
                <span>Item</span>
                <ul>
                    <li><span>Item</span></li>
                    <li><span>Item</span></li>
                    <li><span>Item</span></li>
                    <li><span>Item</span></li>
                    <li><span>Item</span></li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

Answer 1

这种实现仅通过 css 是不可能的。你将不得不使用javascript。此外，使用 JS 不应导致如此糟糕的性能。每当添加或删除新值时，只需让 JS 检查和更新。然后，我们谈论线性依赖于行数的性能。与浏览器在可能的情况下试图从 css 规则中弄清楚(也线性依赖于行数或更糟)几乎没有什么不同。