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

我想知道是否可以仅使用 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/ http://jsfiddle.net/bCU34/6/

CSS 选择器允许您选择all父节点的命名元素，通过使用空格将命名元素与父元素分隔开。例如，要选择所有无序列表元素，您可以执行如下操作。注意全部ul元素在任何深度继承无项目符号/边距/填充的样式。为了做风格nth对于元素类型的层，您需要使用父选择器>。见下文。我使用了字体颜色，但您可以以相同的方式设置背景图像。请注意，据我所知，目前没有后代级别选择器。这已在另一篇文章中讨论过CSS 选择最多 N 层的嵌套元素 https://stackoverflow.com/questions/38596338/css-select-nested-elements-up-to-n-levels-deep.

.container ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.container > ul > li {
  color: green;
}
.container > ul > li > ul > li {
  color: red;
}
.container > ul > li > ul > li > ul > li {
  color: blue;
}

<section class="container">
  <h1>CSS Nested List Styling</h1>
  <ul>
      <li>
          <h3>Section 1</h3>
          <ul>
              <li>
                  <h4>Foo</h4>
                  <ul>
                      <li>
                          <h5>Bar</h5>
                      </li>
                      <li>
                          <h5>Bar</h5>
                      </li>
                  </ul>
              </li>
              <li>
                  <h4>Foo Bar</h4>
                  <ul>
                      <li>
                          <h5>Bar</h5>
                      </li>
                      <li>
                          <h5>Bar</h5>
                      </li>
                  </ul>
              </li>
          </ul>
      </li>
      <li>
          <h3>Section 2</h3>
          <ul>
              <li>
                  <h4>Hello</h4>
                  <ul>
                      <li>
                          <h5>World</h5>
                      </li>
                  </ul>
              </li>
          </ul>
      </li>
  </ul>
  
</section>