html - 避免多个 uls 创建一个 "diagonal"列表

Question

我正在尝试创建一个倾斜/对 Angular 线列表，但想避免有几个嵌套的 uls，有没有办法做到这一点，这是我目前的代码:

<ul className={style.steps}>
  <li>
    <p className={style.step}>Lorem</p>
    <ul className={style.steps}>
      <li>
        <p className={style.step}>Ipsum</p>
        <ul className={style.steps}>
          <li>
            <p className={style.step}>dolor</p>
            <ul className={style.steps}>
              <li>
                <p className={style.step}>sit</p>
              </li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

Answer 1

如果您可以更新代码的输出方式，则不需要第 n 个选择器，尤其是当列表是动态的并且长度会改变时，您可以使用 CSS 变量。

您可以使用 :root 设置默认值，然后您可以在每个 li 元素 --index: number 上添加自定义属性值。您可以将元素上的 CSS var 更改为您需要的任何内容。

:root {
  --margin-value: 10px;
}

ul,
li {
  margin: 0;
  padding: 0;
}

li {
  margin-left: calc(var(--index) * var(--margin-value));
}

<ul>
  <li style="--index: 1">One</li>
  <li style="--index: 2">Two</li>
  <li style="--index: 3">Three</li>
  <li style="--index: 4">Four</li>
  <li style="--index: 5">Five</li>
</ul>