在HTML中编号嵌套的有序列表

Question

我有一个嵌套的有序列表。

<ol>

  <li>first</li>

  <li>second

  <ol>

    <li>second nested first element</li>

    <li>second nested secondelement</li>

    <li>second nested thirdelement</li>

  </ol>

  </li>

  <li>third</li>

  <li>fourth</li>

</ol>

当前，嵌套元素再次从1开始返回，例如

第一

第二

第二个嵌套的第一个元素

第二个嵌套的第二个元素

第二个嵌套的第三个元素

第三

第四

我想要的是第二个元素的编号，如下所示：

第一

第二

2.1。第二个嵌套的第一个元素

2.2。第二个嵌套的第二个元素

2.3。第二个嵌套的第三个元素

第三

第四

有办法吗？

Answer 1

我知道现在答复太晚了，但是我只是找到了一个使用CSS进行操作的示例。将此添加到您的CSS部分（或文件）：ol.nested{&nbsp; &nbsp; counter-reset: item}li.nested{&nbsp; &nbsp; display: block}li.nested:before{&nbsp; &nbsp; content: counters(item, ".") ". ";&nbsp; &nbsp; counter-increment: item}这是您的列表代码的示例：<ol class="nested"><li class="nested">item 1</li><li class="nested">item 2&nbsp; &nbsp; <ol class="nested">&nbsp; &nbsp; &nbsp; &nbsp; <li class="nested">subitem 1</li>&nbsp; &nbsp; &nbsp; &nbsp; <li class="nested">subitem 2</li>&nbsp; &nbsp; </ol></li><li class="nested">item 3</li></ol>高温超导

Answer 2

此页面上的解决方案均不能在所有级别和长（包装）段落中正确且普遍地使用。由于标记的大小可变（1，。，1.2、1.10、1.10.5等），要获得一致的缩进确实很棘手；它不能只是“伪造”的，甚至不能为每个可能的压痕级别使用预先计算的边距/填充。我终于想通了，解决实际工作，不需要任何JavaScript。已在Firefox 32，Chromium 37，IE 9和Android浏览器上进行了测试。在IE 7及更高版本上不起作用。CSS：ol {&nbsp; list-style-type: none;&nbsp; counter-reset: item;&nbsp; margin: 0;&nbsp; padding: 0;}ol > li {&nbsp; display: table;&nbsp; counter-increment: item;&nbsp; margin-bottom: 0.6em;}ol > li:before {&nbsp; content: counters(item, ".") ". ";&nbsp; display: table-cell;&nbsp; padding-right: 0.6em;&nbsp; &nbsp;&nbsp;}li ol > li {&nbsp; margin: 0;}li ol > li:before {&nbsp; content: counters(item, ".") " ";}