html - 在ol项目html上实现子编号

Question

我不确定它叫什么，但是否有可能实现以下格式:

1.

1.1

1.2

1.2.1

1.2.2

1.3

我想就这些了，谢谢!

Answer 1

事实上，有几个选项在稳健性和支持方面有所不同:

1. 在生成列表的代码中执行此操作。毕竟，如果它是生成的 HTML。维基百科就是这样做的，例如他们的章节编号。
2. 您可以在页面加载后编写一些 JavaScript 来执行此操作。自然不会在关闭 JavaScript 的情况下工作。

3. 或者您可以转到 CSS counters .这可能是最好的选择，如果您不需要支持旧版本的 IE，自版本 8 开始支持它。

   Counters are "self-nesting", in the sense that resetting a counter in a descendant element or pseudo-element automatically creates a new instance of the counter. This is important for situations like lists in HTML, where elements can be nested inside themselves to arbitrary depth. It would be impossible to define uniquely named counters for each level.

   Example(s):

   Thus, the following suffices to number nested list items. The result is very similar to that of setting 'display:list-item' and 'list-style: inside' on the LI element:

   OL { counter-reset: item }
   OL>LI { display: block }
   OL>LI:before { content: counters(item, ".") ". "; counter-increment: item }