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

我正在寻找一种最好的方法来实现理论上无限多嵌套级别的交替行颜色。下面是我正在测试的标记和JSFIDLE的一个示例

对于第n个孩子，很难让交替颜色正确工作，您需要有效地硬编码每个级别的组合，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>

项目


项目


项目


项目

项目
项目
项目
项目
项目



项目

项目
项目
项目
项目
项目



项目

项目
项目
项目
项目
项目

仅通过css是不可能实现的。您必须使用javascript。而且，JS的使用不应该导致如此糟糕的性能。只要让JS检查并在添加或删除新值时更新即可。然后，我们讨论的是线性依赖于行数的性能。这与浏览器试图从css规则中找出它是否可行（也与行数成线性关系或更糟）几乎没有什么不同。

仅通过css是不可能实现的。您必须使用javascript。而且，JS的使用不应该导致如此糟糕的性能。只要让JS检查并在添加或删除新值时更新即可。然后，我们讨论的是线性依赖于行数的性能。这与浏览器试图从css规则中找出它是否可行几乎没有什么不同（也与行数成线性关系，甚至更糟）。

Hi Paul。请你用一个实际的问题重新措辞好吗？我想你是在问“有没有更好的CSS解决方案？”还有，你是否想要一个可以工作到任意级别的CSS解决方案，而不必提供CSS中的具体案例？你应该用javascript编写一个函数，并在需要时对其进行校准。这不会影响性能，因为您的物品很少。如果你需要，我可以试试这个函数。你的例子是你想要的，还是错的？您希望示例中的第五行为绿色吗？@RoToRa我认为示例显示了它在第一次嵌套时的工作方式，但在第二次嵌套时不起作用。嗨，Paul。请你用一个实际的问题重新措辞好吗？我想你是在问“有没有更好的CSS解决方案？”还有，你是否想要一个可以工作到任意级别的CSS解决方案，而不必提供CSS中的具体案例？你应该用javascript编写一个函数，并在需要时对其进行校准。这不会影响性能，因为您的物品很少。如果你需要，我可以试试这个函数。你的例子是你想要的，还是错的？您希望示例中的第五行是绿色的吗？@RoToRa我认为该示例显示了它在第一次嵌套时的工作方式，但在第二次嵌套时不起作用。是的，这在CSS中是不可能的，因为它没有第n次嵌套深度的概念。我认为是这样的，然而，我想提出一个问题，以防有人发现一个新的伪选择器，使这成为可能。我正在使用WebSocket收回数据，数据以惊人的速度以块的形式返回。当每个块返回时，它被写入DOM。总的来说，可能有约3000行，它们可能是嵌套的，并且每个级别都是可折叠的。只是我不想每次运行重绘或展开/折叠层次结构的一部分时都在JS中重新计算。但是我猜浏览器正在运行类似的计算来呈现样式。是的，这在CSS中是不可能的，因为它没有n个嵌套深度的概念。我认为是这样的，但是想提出一个问题，如果有新的人使用一个新的伪选择器，这可能会成为可能。我正在使用WebSocket收回数据，数据以惊人的速度以块的形式返回。当每个块返回时，它被写入DOM。总的来说，可能有约3000行，它们可能是嵌套的，并且每个级别都是可折叠的。只是我不想每次运行重绘或展开/折叠层次结构的一部分时都在JS中重新计算。但是我猜浏览器正在运行类似的计算来渲染样式。