CSSカウンターでリストが入れ子になる場合のcounterの書き方

Question

1前提・実現したいこと

CSS カウンターを使用してol、liで自動で番号を振りたいです。
しかし、入れ子になる場合に２行目の表示がうまくいっておりません。
※入れ子は３階層までになります。

2.行目の行頭に番号が付いてしまいます。

CSS カウンターの使用してolの行頭に番号を追加しましたが、
入れ子になる場合の２行目表示が１カウントされてしまいます。
何か記述が足りないのでしょうか？？
■参考ページ
入れ子になったカウンターの例

3.該当のソースコード

<div class="aaa">
 <ol>
      <li>1行頭</li>
      <ol>
        <li>1.1行頭</li>
        <ol>
          <li>1.1.1行頭</li>
          <li>1.1.2行頭</li>
        </ol>
        <li>1.1.3行頭　**※1.2で始まらない**</li>
        <ol>
          <li>1.1.1行頭</li>
          <li>1.1.2行頭</li>
          <li>1.1.3行頭</li>
        </ol>
      </ol>
      <li>1.2　**※2で始まらない**</li>
      <ol>
        <li>1.1行頭</li>
        <li>1.2行頭</li>
      </ol>
    </ol>
</div>

#aaa ol{
  counter-reset: section;
  list-style-type: none;
}

#aaa ol li::before {
  counter-increment: section;
  content: counters(section, ".") " ";

Answer 1

参考ページのように、2段階目以下の<ol>は、<li>の中に入れてください。<ol>の直下に<ol>を置いてはいけないので、おかしくなってます。

現状:

        <li>1.1行頭</li>
        <ol>
        ....
        </ol>

修正案:

        <li>1.1行頭
        <ol>
        ....
        </ol></li>

Comments

[momori]

なるほど。おかしい原因は分かりました。ありがとうございます。
しかし、ul、liはこの形で出力されるので、並びは変更できないんですよね…。

[int32_t]

HTML規格違反ですから、並びを変更しないとダメです。

https://html.spec.whatwg.org/multipage/grouping-content.html#the-ol-element:concept-element-content-model
> Content model:
> Zero or more li and script-supporting elements.

[momori]

ご指摘いただき、ありがとうございます。
見直します。