你可以使用计数器来做到这一点:

下面的样式表编号嵌套列表项，如“1”、“1.1”、“1.1.1”等。 OL {counter-reset: item} LI{显示:块} LI:前面{内容:计数器(项目，“。”)“”;反增量:item}

例子

ol(反重置:项目) 李显影:街区! 李:之前(项目，“项目”)”;补充:项目: < ol > < li > li元素 < ol > <li>sub li element</li> <li>sub li element</li> <li>sub li element</li> < / ol > < / li > < li > li元素< / li > < li > li元素 < ol > <li>sub li element</li> <li>sub li element</li> <li>sub li element</li> < / ol > < / li > < / ol >

有关更多信息，请参见嵌套计数器和范围。

注意:使用CSS计数器在现代浏览器中创建嵌套编号。请看公认的答案。以下内容仅供参考。

如果浏览器支持内容和计数器，

. foo { counter-reset: foo; ｝ .foo li { list-style-type:没有; ｝ .foo li::before { counter-increment: foo; 内容:“1.”counter(foo)“”; ｝ < ol class = " foo " > <李> uno李< / > <李> dos李< / > <李>非常李< / > <李>四弦吉他李< / > < / ol >

在不久的将来，您可能能够使用::marker伪元素在一行代码中实现与其他解决方案相同的结果。

记得检查浏览器兼容性表，因为这仍然是一个实验技术。 在撰写本文时，只有Firefox和Firefox for Android(从版本68开始)支持此功能。

这是一个抽泣，如果尝试在一个温和的浏览器: 签名。‘:’的 李正左:0。 < ol > < li > li元素 < ol > <li>sub li element</li> <li>sub li element</li> <li>sub li element</li> < / ol > < / li > < li > li元素< / li > < li > li元素 < ol > <li>sub li element</li> <li>sub li element</li> <li>sub li element</li> < / ol > < / li > < / ol >

你可能也想看看smashingmagazine上关于这个话题的文章。

下面的方法对我很有效:

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, ".") ") ";
}

看:http://jsfiddle.net/rLebz84u/2/

或者这个http://jsfiddle.net/rLebz84u/3/ 有更多和合理的文本

我需要将此添加到12中发布的解决方案中，因为我使用了一个混合了有序列表和无序列表组件的列表。不加引号似乎有点奇怪，我知道，但它很管用……

ol ul li:before {
  content: no-close-quote;
  counter-increment: none;
  display: list-item;
  margin-right: 100%;
  position: absolute;
  right: 10px;
}

本页上没有任何解决方案适用于所有级别和长(包装)段落。由于标记(1)的大小可变，实现一致的缩进确实很棘手。， 1.2, 1.10, 1.10.5，…);它不能只是“伪造”，甚至不能为每个可能的缩进级别预先计算边缘/填充。

我终于想出了一个解决方案，实际上工作，不需要任何JavaScript。

它在Firefox 32, Chromium 37, IE 9和Android浏览器上进行了测试。不能在ie7和之前版本上工作。

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上分叉。