Схема смешанных букв и цифр в CSS - PullRequest
1 голос
/ 04 октября 2019

Я ищу код SIMPLEST, ELEGANT, SCALABLE и RECURSIVE 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).

Заранее спасибо.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...