如何在有序列表中实现十进制编号？ [复制]答案

【问题标题】：How to achieve decimal numbering in ordered lists? [duplicate]如何在有序列表中实现十进制编号？ [复制]
【发布时间】：2018-09-20 12:14:19
【问题描述】：

使用 HTML 和 CSS，我可以做到这一点吗？

1.
1.1
1.2
2.
2.1
2.2

使用<li> 和<ul> 标签？

【问题讨论】：

标签： html css

【解决方案1】：

对于兼容 CSS 的浏览器，您可以使用：

ul { counter-reset:item; }
ul > li { counter-increment:item; }
ul > li:before {content: counter(item); }

ul > li > ul { counter-reset:subitem; }
ul > li > ul > li { counter-increment:subitem; }
ul > li > ul > li:before { content: counter(item) "." counter(subitem); }

【讨论】：

【解决方案2】：

没有跨浏览器的方法。

你能做到的最好的就是嵌套的有序列表：

<ol>
    <li>Item 1
        <ol>
            <li>Subitem 1</li>
        </ol>
    </li>
</ol>

然后为每个嵌套列表设置不同的类型：

ol {
    list-style-type: upper-roman;
}
ol ol {
    list-style-type: decimal;
}

希望这会有所帮助！

【讨论】：

【解决方案3】：

考虑使用 DL/DT/DD 而不是 OL/UL 并对 DT 中的值进行硬编码。

【讨论】：

【解决方案4】：

CSS 2.1 提供用户可定义的计数器，可用于对元素进行计数。结合 :before 和 :after 伪类，可以输出计数器值来创建自动编号的标题。

不幸的是，至少 Internet Explorer 不支持任何这些，即使在最新版本中也是如此。但至少 Firefox 确实很好地支持它，所以如果你只是想将它添加为增强功能，如果不支持它不会使你的网站无法使用，你仍然可以使用它。

【讨论】：

【解决方案5】：

http://www.w3.org/TR/CSS2/generate.html

但是，是的，这仅适用于现代浏览器。嵌套的 OL 可能是要走的路。

【讨论】：

【解决方案6】：

是的，这可以通过CSS Counters 完成。但是，它不适用于所有浏览器。

【讨论】：

【解决方案7】：

一行 javascript 就可以做到这一点。用于目录：

<td class="session">
<script>
{document.getElementsByClassName("session")[num].innerHTML = "1." + (++num);}
</script>
</td>

num 是文档中的全局变量，在上游的适当位置初始化为零。上面首先产生 1.1。更改为 num++ 并获得 1.0。

【讨论】：

【解决方案8】：

html代码：

<ul>
  <li>1  </li>          
  <li>1.1</li>    
  <li>1.2</li>      
  <li>2  </li>                  
  <li>2.1</li>  
  <li>2.2</li>  
</ul>

css代码：

li  {   list-style:none; }

【讨论】：

不正确的 HTML，并且在更改源代码中的顺序时自动重新编号在此答案中丢失。