是否可以在 HTML 中创建多级有序列表？ [复制]答案

【问题标题】：Is it possible to create multi-level ordered list in HTML? [duplicate]是否可以在 HTML 中创建多级有序列表？ [复制]
【发布时间】：2013-09-06 15:55:42
【问题描述】：

我想要这个：

1. Main
  1.1 sub1
  1.2 sub2
2. Main2
  2.1 sub3

是否可以在 HTML 中做到这一点？谢谢。

【问题讨论】：

标签： html

【解决方案1】：

这个解决方案对我有用：

/* hide original list counter */
ol li {display:block;} 
/* OR */
ol {list-style:none;}  

ol > li:first-child {counter-reset: item;} /* reset counter */
ol > li {counter-increment: item;} /* increment counter */
ol > li:before {content:counters(item, ".") ". "; font-weight:bold;} /* print counter */

【讨论】：

我根据我的口味对您的代码进行了轻微修改。它位于另一个类似的问题中：stackoverflow.com/questions/4098195/…

【解决方案2】：

是的，至少在现代浏览器中：

li li:before {
  counter-increment: item;
  content: counter(item) ". ";
}

（li li 是这样，它只在第一级之后才这样做。）

您可能还需要counter-reset。

【讨论】：

谢谢，爱丽儿。我为此添加了更多内容以使其正常工作。
但是，我们需要为此处理每个级别。有点烦人。 HTML5 能更好地处理这个问题吗？

【解决方案3】：

body
{
    counter-reset:section;
}

h1
{
    counter-reset:subsection;
}

h1:before
{
    counter-increment:section;
    content:"Section " counter(section) ". ";
}

h2:before 
{
    counter-increment:subsection;
    content:counter(section) "." counter(subsection) " ";
}
body
{
    counter-reset:section;
}

这是 counter-increment 和 counter-reset 的示例。

【讨论】：