带有起始索引的 HTML 嵌套编号列表

Question

在我的应用程序中，我有一个页面列出了一些按类别分组的数据。

列表中的每个元素都可以有子元素。

所以我希望它看起来像这样:

1. 列表项

   1.1 列表项

   1.2 列表项

2. 列表项

   2.1 列表项

   2.2 列表项

我可以使用这三行 css 代码轻松实现:

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

但是在这个页面上我有每个类别的选项卡，其中包含这样的嵌套元素列表，我想使下一个选项卡的第一个元素的索引成为第 x+1 个元素，其中 x 是最后一个元素的编号上一个选项卡(类别)。

#tab 1
 1. List item

   1.1 List item

   1.2 List item
 2. List item

   2.1 List item

   2.2 List item

#tab 2
 3. List item

   3.1 List item

   3.2 List item
 4. List item

   4.1 List item

   4.2 List item

所以我需要功能来为 <ol> 提供起始索引标签。我发现有属性 start="x"，但是它不适用于嵌套列表的这 3 行 css 代码。

知道如何做这样的事情吗？

Answer 1

只需删除 css，并正确关闭和重新打开 <ol>标签。

如果您需要将列表拆分为两个单独的选项卡，您必须关闭第一个 <ol>在第一个选项卡内。然后，使用第二个选项卡中的开始参数重新打开新列表:<ol start="3"> .

Working fiddle -(我设置 start="5"以显示它正在工作；出于您的目的，只需将其设置为 3 或您需要的值)

更新:

保留 CSS，并将所有选项卡包装在主 <ol> 中和 </ol> ，因此计数器不会重置。

http://jsfiddle.net/qGCUk/227/