css - 在 CSS 中概述混合的字母和数字计数器

Question

我正在寻找最简单、优雅、可扩展和递归的 CSS 代码来获得这样的列表：

A1 Matilda
A2 Giorgio
   B1 Luisa
   B2 Giovanni
      C1 Anna
      C2 Francesco
         D1 Giorgio
         D2 Marco
            E1 Luigi
            E2 Giovanna
            E3 Maria
         D3 Ernesto
      C3 Benedetta
   B3 Annabella
A3 Stefano

通过递归，我的意思是我不想假设我有特定数量的嵌套级别，也不想创建许多不同的计数器来关联到类，因为这会使列表在发生变化时难以维护。

所以我写了下面的CSS代码

.tree { }
.tree ul {list-style: none; }
.tree ul li { }
.tree ul li:before { margin: 0 0.5rem 0 0; }

.tree { counter-reset: alpha; }
.tree ul { counter-increment: alpha; counter-reset: number; }
.tree ul li:before { counter-increment: number; content: counter(alpha,upper-alpha) counter(number); }

对于以下 HTML 代码

<div class="tree">
  <ul>
    <li>Matilda</li>
    <li>Giorgio
      <ul>
        <li>Luisa</li>
        <li>Giovanni
          <ul>
            <li>Anna</li>
            <li>Francesco
              <ul>
                <li>Giorgio</li>
                <li>Marco
                  <ul>
                    <li>Luigi</li>
                    <li>Giovanna</li>
                    <li>Maria</li>
                  </ul>
                </li>
                <li>Ernesto</li>
              </ul>
            </li>
            <li>Benedetta</li>
          </ul>
        </li>
        <li>Annabella</li>
      </ul>
    </li>
    <li>Stefano</li>
  </ul>
</div>

但我明白了

A1 Matilda
A2 Giorgio
   B1 Luisa
   B2 Giovanni
      C1 Anna
      C2 Francesco
         D1 Giorgio
         D2 Marco
            E1 Luigi
            E2 Giovanna
            E3 Maria
         E3 Ernesto
      E3 Benedetta
   E3 Annabella
E3 Stefano    

知道如何在不假设特定嵌套级别（例如 5）的情况下获得我想要的东西。

先感谢您。

标签： cssnestedcounter