设置任意深度的嵌套列表样式

Question

我想知道是否可以仅使用 CSS 来设置嵌套无序列表的样式，而不使用任何脚本。问题是 CSS 需要适用于列表树的任何深度。

例如，我有一个列表：

<ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li class="holder">
        <ul>
            <li>Item 4</li>
            <li>Item 5</li>
             <li class="holder"> 
                <ul>
                    <li>Item 6</li>
                    <li>Item 7</li>
                    <li>Item 8</li>   
                    <li class="holder"> 
                        <ul>
                            <li>Item 9</li>
                            <li>Item 10</li>
                            <li>Item 11</li>        
                        </ul>
                    </li> 
                </ul>
            </li>        
        </ul>
    </li>
</ul>

这是我的 CSS：

li{
    background: gray;
    border: 1px solid;
    display: block;
    margin: 2px;
}
.holder{
    background: none;
    border: none;
}

/*replace these styles*/
li > ul > li{
    background: white;
}

li > ul > li > ul > li{
    background: gray;
}

li > ul > li > ul > li > ul > li{
    background: white;
}

如果节点的父节点具有背景 A，则节点应具有背景 B。如果节点的父节点具有背景 B，则节点应具有背景 A。

请检查： http: //jsfiddle.net/bCU34/6/

Answer 1

目前，对于选择器级别 3来说， \xe2\x80\x99t 没有任何特定的方法来执行此操作，并且选择器级别 4的当前草案似乎也没有添加任何内容。我深入研究了 www 风格的邮件列表，并发现了Lachlan Hunt于 2005 年 4 月发表的这篇文章，其中表明:nth-descendant()已经考虑过样式选择器，但从未指定。

\n