CSS中字母和数字混合计数器的轮廓

我正在寻找最简单、优雅、可伸缩和递归的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>

任何关于如何在不假设特定嵌套级别（例如5）的情况下获得所需内容的想法

---

提前谢谢。虽然有点偏离主题，但这不会解决你的问题，但是这些列表是明确的，所以你可能想考虑<代码> <代码>过<代码> UL> < /代码>：-我不认为这是可能的，因为<代码> Alpha < /代码>计数器将为每个<代码> UL><代码>增加（嵌套或不嵌套）。除非指定列表级别。当您从嵌套的

元素中“返回”时，在您的示例中，

alpha

计数器已达到E，并且无法递减。有点离题，因为这无法解决您的问题，但是这些列表是明确的命令，所以您可能需要考虑<代码> <代码> > <代码> < UL> < /代码>：-）我不认为这是可能的，因为<代码> Alpha < /Cord>计数器将为每个<代码> UL> < /C> >（嵌套或不）增加，除非您指定列表级别。当您从嵌套的

元素中“返回”时，在您的示例中，

alpha

计数器最多为E，并且不能递减。

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