html - 有序列表未正确递增

Question

在此有序列表中，我尝试使用十进制数字，但由于某种原因，它没有按预期编号。为了修复 B 和 C 部分的编号并实现以下目标，需要做什么？:

2) B

2.1) B1

2.2) B2

2.3) B3

3) C

ol {
	counter-reset: item;
	list-style-type: decimal;
}
li {
	display: block;
}
li:before {
content: counters(item, ".") ") "; counter-increment: item
}
<!-- begin snippet: js hide: false console: true babel: false -->

<ol>
  <li><a>A</a>
  </li>
  <ol>
    <li><a>A1</a>
    </li>
    <li><a>A2</a>
    </li>
    <li><a>A3</a>
    </li>
    <li><a>A4</a>
    </li>
  </ol>
  <li><a>B</a></li>
  <ol>
    <li><a>B1</a>
    </li>
    <li><a>B2</a>
    </li>
    <li><a>B3</a>
    </li>
  </ol>
  <li><a>C</a>
  </li>
</ol>

content: counters(item, ".") ". "; counter-increment: item
}

      <ol>
        <li><a>A</a></li>
        <ol>
          <li><a>A1</a></li>
          <li><a>A2</a></li>
          <li><a>A3</a></li>
          <li><a>A4</a></li>
        </ol>
        <li><a>B</a></li>
        <ol>
          <li><a>B1</a></li>
          <li><a>B2</a></li>
          <li><a>B3</a></li>
        </ol><li><a>C</a></li>
        </ol>

Answer 1

子ol需要位于li元素内:

ol {
  counter-reset: item;
  list-style-type: decimal;
}
li {
  display: block;
}
li::before {
  content: counters(item, ".")") ";
  counter-increment: item
}

<ol>
  <li>
    <a>A</a>
    <ol>
      <li><a>A1</a>
      </li>
      <li><a>A2</a>
      </li>
      <li><a>A3</a>
      </li>
      <li><a>A4</a>
      </li>
    </ol>
  </li>
  <li>
    <a>B</a>
    <ol>
      <li><a>B1</a>
      </li>
      <li><a>B2</a>
      </li>
      <li><a>B3</a>
      </li>
    </ol>
  </li>
  <li>
    <a>C</a>
  </li>
</ol>