Форматирование упорядоченного списка с помощью CSS

Question

Я пытаюсь отформатировать свой список так, чтобы он выглядел следующим образом

1. one
   1.1 one.one
   1.2 one.two
   1.3 one.three
       a) one.three.a
       b) one.three.b
       c) one.three.c
2. two
   2.1 two.one
3. three

Я пытался поиграть, но безуспешно, кто-нибудь может мне помочь с тем, что я делаю неправильно? Скриптовая ссылка https://jsfiddle.net/freal0s/d632a48w/1/

Answer 1

Вам необходимо установить правильный класс селектора root -level ol и >, чтобы не перепутать CSS.

См. Решение ниже:

ol {
  list-style-type: none;
}

/* Level 1 */
ol.root {
  counter-reset: listStyle;
}
ol.root > li {
  margin-left: 1em;
}
ol.root > li::before {
  margin-right: 1em;
  counter-increment: listStyle;
  content: counter(listStyle)".";
}

/* Level 2 */
ol.root > li > ol {
  counter-reset: listStyle2;
}
ol.root > li > ol > li::before {
  margin-right: 1em;
  counter-increment: listStyle2;
  content: counter(listStyle, decimal)"."counters(listStyle2,'.');
}

/* Level 3 */
ol.root > li > ol > li > ol {
  counter-reset: listStyle3;
}
ol.root > li > ol > li > ol > li::before {
  margin-right: 1em;
  counter-increment: listStyle3;
  content: counter(listStyle3, lower-alpha)")";
}

<ol class="root">
  <li>one
    <ol>
      <li>one.one
        <ol>
          <li>one.one.a</li>
          <li>one.one.b</li>
          <li>one.one.c</li>
        </ol>
      </li>
      <li>one.two</li>
      <li>one.three</li>
    </ol>
  </li>
  <li>two</li>
  <li>three</li>
</ol>