CSS 嵌套列表項和替代背景

Question

我正在尋找一種讓列表項具有交替背景顏色的方法。 當存在嵌套列表時，項目會保持交替，但子項會縮進，而父項的背景顏色不會向下流到其嵌套的子項。

無法應用類。 物品的數量也是可變的。 最好它應該適用於無限數量的嵌套列表。 但如果這是不可能的，3 個深度的上限（如圖所示）就足夠了。 如果使用 div 而不是 li 和 ul 更容易做到，那對我來說也是可能的。 我更喜歡純 HTML/CSS。

因為我所有的實驗都沒有效果，所以我只能提供帶有嵌套列表的 JSFiddle。

https://jsfiddle.net/qmdwpzt8/1/

<ul>
<li>Item 1
    <ul>
        <li>Item 1-1</li>
        <li>Item 1-2
            <ul>
                <li>Item 1-2-1</li>
                <li>Item 1-2-2</li>
            </ul>
        </li>
        <li>Item 1-3</li>
    </ul>
</li>
<li>Item 2
    <ul>
        <li>Item 2-1
            <ul>
                <li>Item 2-1-1</li>
            </ul>
        </li>
    </ul>    
</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>

Answer 1

這是一種潛在的解決方案： https : //jsfiddle.net/qmdwpzt8/3/

不確定它是否會滿足您的所有要求，但我用div更新了您的列表：

<ul>
    <li><div>Item 1</div>
        <ul>
            <li><div>Item 1-1</div></li>
            <li><div>Item 1-2</div>
                <ul>
                    <li><div>Item 1-2-1</div></li>
                    <li><div>Item 1-2-2</div></li>
                </ul>
            </li>
            <li><div>Item 1-3</div></li>
        </ul>
    </li>
    <li><div>Item 2</div>
        <ul>
            <li><div>Item 2-1</div>
                <ul>
                    <li><div>Item 2-1-1</div></li>
                </ul>
            </li>
        </ul>    
    </li>
    <li><div>Item 3</div></li>
    <li><div>Item 4</div></li>
</ul>

然后使用 jQuery 添加背景顏色：

$( document ).ready(function() {
    var b = true;
    $( "div" ).each(function( index ) {
        b = !b;
        if (b) {
            $(this).css("background-color", "#ff0000");
        } else {
            $(this).css("background-color", "#00ff00");
        }            
    });
});

這確實取決於 jQuery/Javascript。