在HTML中编号嵌套的有序列表
我有一个嵌套的有序列表。
<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。 第二个嵌套的第三个元素
- 第三
- 第四
有没有办法做到这一点？
这是一个适用于所有浏览器的例子。 纯粹的CSS方法适用于真正的浏览器（即IE6 / 7以外的所有东西）， jQuery代码覆盖了不受支持的东西。 这是一个SSCCE的味道，你可以复制'n'paste'n'run它没有改变。
<!doctype html> <html lang="en"> <head> <title>SO question 2729927</title> <script src="http://code.jquery.com/jquery-latest.min.js"></script> <script> $(document).ready(function() { if ($('ol:first').css('list-style-type') != 'none') { /* For IE6/7 only. */ $('ol ol').each(function(i, ol) { ol = $(ol); var level1 = ol.closest('li').index() + 1; ol.children('li').each(function(i, li) { li = $(li); var level2 = level1 + '.' + (li.index() + 1); li.prepend('<span>' + level2 + '</span>'); }); }); } }); </script> <style> html>/**/body ol { /* Won't be interpreted by IE6/7. */ list-style-type: none; counter-reset: level1; } ol li:before { content: counter(level1) ". "; counter-increment: level1; } ol li ol { list-style-type: none; counter-reset: level2; } ol li ol li:before { content: counter(level1) "." counter(level2) " "; counter-increment: level2; } ol li span { /* For IE6/7. */ margin: 0 5px 0 -25px; } </style> </head> <body> <ol> <li>first</li> <li>second <ol> <li>second nested first element</li> <li>second nested second element</li> <li>second nested third element</li> </ol> </li> <li>third</li> <li>fourth</li> </ol> </body> </html>
我知道回复迟到，但我刚刚find了一个使用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>
HTH
没有任何解决scheme在这个网页上正常和普遍的所有级别和长（包装）的段落。 由于可变尺寸的标记（1.，1.2，1.10，1.10.5，…），实现一致的缩进非常棘手; 它不能只是“伪造”，即使对于每个可能的缩进级别都有预先计算的边距/填充。
我终于想出了一个实际工作的解决scheme，不需要任何JavaScript。
它在Firefox 32，Chromium 37，IE 9和Android Browser上testing。 不适用于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, ".") " "; }
例： 
尝试一下jsFiddle ，把它放在Gist上 。
Acctualy如果你在你的项目中使用sass / scss项目，你可以使用mixin 。 为了devise这个嵌套列表，你只需要两行sass代码。
@import 'nested_list' +nested_list('nested', 2) <ol> <li>first</li> <li>second <ol class="nested-2"> <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>
完整的例子，你可以从git repo克隆/监视或在fidle上生成的CSS
稍微调整一下，你就可以适应这里使用的技术 （在第二个例子中）来创build顺序列表。
这在纯HTML / CSS中是不可能的。 请参阅BalusC的答案，这是一个非常好的解决scheme。 编号types列表可以在这里findw3schools 。
我能find的最接近的选项是使用w3c中的value属性 ，但使用下面的标记
<ol> <li value="30"> makes this list item number 30. </li> <li value="40"> makes this list item number 40. </li> <li> makes this list item number 41. </li> <li value="2.1"> makes this list item number ... </li> <li value="2-1"> makes this list item number ... </li> </ol>
产生一个编号为30,40,41,2和2的列表。
正如John已经指出的那样，在这种情况下，最好的办法就是编写脚本。
