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>