实现ol项目html的子编号 [英] Achieving sub numbering on ol items html

问题描述

我不知道它叫什么，但可以实现以下格式：

<1>

1.1

<1.2>

1.2.1

1.2.2

<1.3>

我认为这就是所有，谢谢！

其他几项选择，实际上在稳健性和支持方面有所不同： >在生成列表的代码中执行此操作。毕竟，只要 是生成HTML的。维基百科做到这一点，例如他们的章节号。

您可以编写一些JavaScript来在页面加载后执行此操作。自然不会在JavaScript中关闭。

或者您可以转到 CSS计数器。这可能是最好的选择，如果你不需要支持自8版以后支持IE的旧版本。

计数器是自嵌套的，因为重置后代元素或伪元素中的计数器会自动创建计数器的新实例。这对于像HTML中的列表这样的情况非常重要，其中元素可以嵌套到任意深度。不可能为每个级别定义唯一命名的计数器。

示例：

因此，以下就足以编号嵌套列表项目。结果与在LI元素上设置'display：list-item'和'list-style：inside'的结果非常相似：

  OL {counter-reset：item} 
 OL> LI {display：block} 
 OL> LI：before {content：counters（item，。）。; counter-increment：item} 
  

Im not sure what its called but is it possible to achieve the format of:

1.

1.1

1.2

1.2.1

1.2.2

1.3

I think thats all, thanks!

解决方案

Several options, in fact, varying in robustness and support:

1. Do this in the code that generates the lists. Provided it is generated HTML, after all. Wikipedia does that, for example for their section numbers.
2. You could write some JavaScript to do it after page loading. Won't work with JavaScript turned off, naturally.

3. Or you can turn to CSS counters. This is probably the best option, if you don't need to support legacy versions of IE, where it is supported since version 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 }
   

这篇关于实现ol项目html的子编号的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！