CSS目錄 - 嵌套列表後計數器不會重置

Question

我有這個基於Creating table of contents in html的HTML/CSS目錄。但是，如何修復自動編號，使其在嵌套列表後正確重置？

當前的結果：

1 Lorem 
2 Ipsum 
    2.1 Dolor 
    2.2 Sit 
      2.2.1 Amet 
      2.2.2 Consectetur 
2.3 Adipiscing 

期望的結果：

1 Lorem 
2 Ipsum 
    2.1 Dolor 
    2.2 Sit 
      2.2.1 Amet 
      2.2.2 Consectetur 
3 Adipiscing 

ol { 
 
    counter-reset: item 
 
} 
 

 
li { 
 
    display: block 
 
} 
 

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

<ol> 
 
    <li>Lorem</li> 
 
    <li>Ipsum</li> 
 
    <ol> 
 
    <li>Dolor</li> 
 
    <li>Sit</li> 
 
    <ol> 
 
     <li>Amet</li> 
 
     <li>Consectetur</li> 
 
    </ol> 
 
    </ol> 
 
    <li>Adipiscing</li> 
 
</ol>

Answer 1

只要看看您的標記照顧（僅li內olšš） - 子-list可以是類似的這樣的：

<li>Sit 
    <ol> 
     <li>Amet</li> 
     <li>Consectetur</li> 
    </ol> 
    </li> 

下面

觀看演示：

ol { 
 
    counter-reset: item 
 
} 
 

 
li { 
 
    display: block 
 
} 
 

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

<ol> 
 
    <li>Lorem</li> 
 
    <li>Ipsum 
 
    <ol> 
 
     <li>Dolor</li> 
 
     <li>Sit 
 
     <ol> 
 
      <li>Amet</li> 
 
      <li>Consectetur</li> 
 
     </ol> 
 
     </li> 
 
    </ol> 
 
    </li> 
 
    <li>Adipiscing</li> 
 
</ol>