padding-left 取决于 subnav deep

Question

我有一个垂直导航，子类别有子类别等等。

第一组的元素需要 20px 的内边距，第二组的元素需要 40px 的内边距，依此类推。结果应该是这样的：

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet"/>
<div class="list-group">
  <a class="list-group-item" href="#">Test 0</a>
  <div class="list-group">
    <a class="list-group-item" href="#" style="padding-left: 40px;">Test 1</a>
    <a class="list-group-item" href="#" style="padding-left: 40px;">Test 1</a>
    <div class="list-group">
      <a class="list-group-item" href="#" style="padding-left: 60px;">Test 2</a>
      <div class="list-group">
        <a class="list-group-item" href="#" style="padding-left: 80px;">Test 3</a>
      </div>
    </div>
  </div>
</div>

但我想用 CSS 规则解决它，不使用 Javascript，也不将其写入 html 元素。 导航的深度可以是 n 个元素，我不想像这样实现 n 个规则：

.list-group .list-group-item {}
.list-group .list-group .list-group-item {}
.list-group .list-group .list-group .list-group-item {}

那么有没有可能只用一些 CSS 规则来解决这个问题？

Answer 1

我会使用ul 和li 标记这样的东西，因为它更容易理解和跟踪。这是我想出的，在没有 javascript 的情况下完成了你所要求的：

HTML
<ul>
    <li><a href="#">Item1</a>
        <ul>
            <li>Hello</li>
            <li><a href="#"></a>Hello
                <ul>
                    <li>Bye</li>
                </ul>
            </li>
        </ul>
    </li>
    <li><a href="#">Item1</a></li>
    <li><a href="#">Item1</a></li>
    <li><a href="#">Item1</a></li>
    <li><a href="#">Item1</a></li>
</ul>

CSS
ul {
    padding: 0;
}

ul li {
    list-style: none;
}
ul > li {
    padding-left: 20px;
}

让我知道这是否为您解决了问题！