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

CSS选择器允许您通过使用空格将命名元素与父元素分开来选择父节点的 all 个命名元素。例如，要选择所有无序列表元素，您将需要执行以下操作。请注意，任何深度处的所有ul元素都继承了样式，没有项目符号/边距/填充。为了对元素类型设置nth图层样式，您需要使用父选择器>。见下文。我使用了字体颜色，但是您可以用相同的方式设置背景图像。请注意，据我所知，目前没有子级选择器。此问题已在另一篇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>

Answer 2

Selectors level 3目前没有任何具体方法可以执行此操作，Selectors level 4的当前草稿似乎也没有添加任何内容。我通过www风格的邮件列表进行了挖掘，并从2005年4月开始提出this post by Lachlan Hunt，表明已经考虑了:nth-descendant()样式选择器，但从未指定过。

使用任何深度设置嵌套列表的样式

2 个答案: