在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

{

    counter-reset: item

}

li.nested

{

    display: block

}

li.nested:before

{

    content: counters(item, ".") ". ";

    counter-increment: item

}

这是您的列表代码的示例：

<ol class="nested">

<li class="nested">item 1</li>

<li class="nested">item 2

    <ol class="nested">

        <li class="nested">subitem 1</li>

        <li class="nested">subitem 2</li>

    </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 {

  list-style-type: none;

  counter-reset: item;

  margin: 0;

  padding: 0;

}

ol > li {

  display: table;

  counter-increment: item;

  margin-bottom: 0.6em;

}

ol > li:before {

  content: counters(item, ".") ". ";

  display: table-cell;

  padding-right: 0.6em;    

}

li ol > li {

  margin: 0;

}

li ol > li:before {

  content: counters(item, ".") " ";

}