样式化任何深度的嵌套列表 [英] Styling nested lists with any depth

问题描述

我想知道是否有可能仅使用CSS对嵌套的无序列表进行样式设置，而无需使用任何脚本.问题在于CSS需要在列表树的任何深度下工作.

I was wondering if it's possible to style nested unordered lists with CSS only, without using any scripts. The problem is that CSS needs to work for any depth of the list tree.

例如，我有一个列表:

<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.

If node's parent has background A, node should have background B. If node's parent has background B, node should have background A.

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

推荐答案

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

CSS selectors allow you to select all named elements of a parent node by separating the named element from the parent element with a space. To select all unordered list elements, for example, you would do like below. Notice all ul elements at any depth inherit the style no bullets/margin/padding. In order do style nth layer for an element type, you need to use the parent selector >. See below. I used font color but you could set background images the same way. Note there is no decendant level selector at this time that I know of. This was addressed on another post 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>

这篇关于样式化任何深度的嵌套列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！