实现HTML有序列表项目的子编号

Question

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

1.

1.1

1.2

1.2.1

1.2.2

1.3

我想这就是全部了，谢谢！

- pakooz

---

纯HTML目前还没有这样的功能。 - user59634

Amit: HTML 永远不会这样做。这是 CSS 的领地。 - Joey

考虑在 http://doctype.com 上提出这个问题（通过 SO FAQ）。 - Mike Atlas

好的，这与设计不太相关，更多地涉及标记，所以这个问题应该在这里没问题。 - Joey

可能是Can ordered list produce result that looks like 1.1, 1.2, 1.3 (instead of just 1, 2, 3, ...) with css?的重复问题。 - Kay V

Answer 1

实际上有几种选项，它们各自具有不同的健壮性和支持：

1. 在生成列表的代码中进行此操作。毕竟，它是生成的HTML。例如，维基百科就是这样做的，用于编号其章节。
2. 您可以编写一些JavaScript在页面加载后执行此操作。当然，如果JavaScript被关闭，则此方法无法使用。

3. 或者您可以使用 CSS计数器。如果您不需要支持IE的旧版本（该功能从版本8开始支持），则这可能是最佳选择。

   计数器是“自我嵌套”的，因为在后代元素或伪元素中重置计数器会自动创建计数器的新实例。这对于像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 }
   

- Joey

---

我知道这是一个相当旧的答案，但我很好奇是否有什么我错过了。我知道规范上说：“以下样式表将嵌套列表项编号为“1”、“1.1”、“1.1.1”等。”但正如我在我的答案中所说的那样，我并没有看到这种情况。这个例子是错误的，还是IE10和Firefox都错了？ - OlduwanSteve

为了后人纪念，这个例子对于问题来说略有错误。应该为：LI:before { content: counters(item,".") ". "; counter-increment: item } - OlduwanSteve

已修复，谢谢。显然我当时只是从规范中复制了错误的示例。 - Joey

如果您在文档中使用<ul>，那么嵌套在其中的<li>是否会采用数字而不是符号呢？ - drleifz

他们可能会。但是通过适当地更改选择器，这可以轻松地解决。 - Joey