HTML CSS Проблемы при реализации вложенного порядка, который включает цифры, алфавиты и римские цифры

Question

У меня есть требование для реализации вложенной упорядоченной структурированной html страницы, очень похожей на эту. Большая часть работы выполнена, но я застрял на 1 месте при заказе номера. Пожалуйста, предложите. Ниже приведена необходимая структура и мой код.

1.Main Line 111111111 
    1.1 Sub Line 111111111 
        a.aaaaaaaaaaa
        b.bbbbbbbbbbb

2.Main Line 22222222
    2.1 Sub Line 111111111 
        a.aaaaaaaaaaa
        b.bbbbbbbbbbb   
    2.2 Sub Line 22222222 
        a.aaaaaaaaaaa 
            i.moreeeeee
            ii.moreeeeee
        b.bbbbbbbbbbb 
            i.moreeeeee
            ii.moreeeeee

Но получим несколько перекрывающихся чисел, как показано на рисунке: Пожалуйста, подскажите, где я делаю неправильно?

Вот в моем коде:

ol {
  counter-reset: item;
}

ol>li {
  counter-increment: item;
}

.sub-num-list>li:before {
  content: counters(item, ".") " ";
  margin-left: -20px;
}

.sub-num-list>ol>li:before {
  content: counters(item, ".") " ";
  margin-left: -20px;
}

.sub-albhabatical-list>li {
  list-style-type: lower-alpha;
  margin-left: 20px;
}

.sub-roman-list>li {
  list-style-type: lower-roman;
  margin-left: 20px;
}

<div class="layout__wrapper">

  <ol>

    <li>Main Line 111111111
      <ol class="sub-num-list">
        <li>Sub Line 111111111
          <ol class="sub-albhabatical-list">
            <li>aaaaaaaaaaa</li>
            <li>bbbbbbbbbbb</li>
          </ol>
        </li>

      </ol>
    </li>

    <li>Main Line 22222222
      <ol class="sub-num-list">
        <li>Sub Line 111111111
          <ol class="sub-albhabatical-list">
            <li>aaaaaaaaaaa</li>
            <li>bbbbbbbbbbb</li>
          </ol>
        </li>
        <li>Sub Line 22222222
          <ol class="sub-albhabatical-list">
            <li>aaaaaaaaaaa
              <ol class="sub-roman-list">
                <li>moreeeeee</li>
                <li>moreeeeee</li>
              </ol>
            </li>
            <li>bbbbbbbbbbb
              <ol class="sub-roman-list">
                <li>moreeeeee</li>
                <li>moreeeeee</li>
              </ol>
            </li>
          </ol>
        </li>
        <li>Sub Line 111111111
          <ol class="sub-albhabatical-list">
            <li>aaaaaaaaaaa</li>
            <li>bbbbbbbbbbb</li>
          </ol>
        </li>
      </ol>
    </li>
  </ol>
</div>

Answer 1

Вы ошиблись в использовании вашего :before и списка counter CSS собственности. Также вы, вероятно, потерялись в CSS селекторах и получили нежелательные эффекты.

Я исправил это для вас, надеюсь, это то, что вы искали

li {
  display: block
}

.main-num-list, .sub-num-list {
  counter-reset: item
}

.main-num-list>li:before,
.sub-num-list>li:before {
  content: counters(item, ".") " ";
  counter-increment: item
}

.sub-albhabatical-list {
  counter-reset: letter;
}

.sub-albhabatical-list > li:before {
  content: counter(letter, lower-alpha) ". ";
  counter-increment: letter;
}

.sub-roman-list {
  counter-reset: roman;
}

.sub-roman-list > li:before {
  content: counter(letter, lower-roman) ". ";
  counter-increment: roman;
}

<div class="layout__wrapper">

  <ol class="main-num-list">

    <li>Main Line 111111111
      <ol class="sub-num-list">
        <li>Sub Line 111111111
          <ol class="sub-albhabatical-list">
            <li>aaaaaaaaaaa</li>
            <li>bbbbbbbbbbb</li>
          </ol>
        </li>

      </ol>
    </li>

    <li>Main Line 22222222
      <ol class="sub-num-list">
        <li>Sub Line 111111111
          <ol class="sub-albhabatical-list">
            <li>aaaaaaaaaaa</li>
            <li>bbbbbbbbbbb</li>
          </ol>
        </li>
        <li>Sub Line 22222222
          <ol class="sub-albhabatical-list">
            <li>aaaaaaaaaaa
              <ol class="sub-roman-list">
                <li>moreeeeee</li>
                <li>moreeeeee</li>
              </ol>
            </li>
            <li>bbbbbbbbbbb
              <ol class="sub-roman-list">
                <li>moreeeeee</li>
                <li>moreeeeee</li>
              </ol>
            </li>
          </ol>
        </li>
        <li>Sub Line 111111111
          <ol class="sub-albhabatical-list">
            <li>aaaaaaaaaaa</li>
            <li>bbbbbbbbbbb</li>
          </ol>
        </li>
      </ol>
    </li>
  </ol>
</div>

Дополнительную информацию можно найти в похожих вопросах о форматировании счетчиков списков и вложенных различных счетчиков типов стилей списков

Answer 2

Просто добавьте этот стиль в свой раздел стилей.

.sub-num-list{
  list-style-type: none;
}

Это удалит перекрытие чисел