CSS增加连续列表元素的余量

Question

我想创建一个列表，其中每个连续元素的边距都大于前一个元素。 你可以在这里看到我想要达到的目标：Example with fixed margin

所以，让我们来一个简单的列表

<ul>
  <li class="a">First element</li>
  <li class="b">Second element</li>
  <li class="c">Third element</li>
</ul>

我可以给每个元素一个类，并为每个类设置一个增加的边距，比如

.a {
  margin-left: 10px;
}

.b {
 margin-left: 20px;
}

.c {
  margin-left: 30px;
}

我希望能够这样做，但是，不直接指定每个元素的边距，而是使用自动应用于每个其他列表元素的固定增量

用css有什么聪明的方法来实现这个目标吗？

Answer 1

明显的答案首先，这是heirarchy的用途，因此大多数人会建议使用嵌套的uls：

<ul>
  <li>001
    <ul>
      <li>002
        <ul>
          <li>003</li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

否则，我认为如果有足够的支持来满足您的需求，您将不得不转向使用JS或CSS calc。