1

我正在寻找为理论上无限数量的嵌套级别实现交替行颜色的最佳方法。下面是我正在测试的标记示例和 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>
4

1 回答 1

1

仅通过 css 无法实现此类实现。您将不得不使用 javascript。此外，JS 的使用不应该导致如此糟糕的性能。每当添加或删除新值时，只需让 JS 检查和更新。然后，我们谈论的是线性依赖于行数的性能。如果可能的话，与试图从 css 规则中找出它的浏览器几乎没有什么不同（也线性依赖于行数或更糟）。

于 2012-12-05T13:00:21.813 回答