带有起始索引的 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

来自http://www.w3.org/TR/css3-lists/#html4：

/* The start attribute on ol elements */
ol[start] { 
    counter-reset: list-item attr(start, integer, 1); 
    counter-increment: list-item -1; 
}

将它添加到 CSS 允许 start 属性在我的测试中被识别。

编辑： 您可以为每个新起点使用 CSS 类，而不是使用 start 属性。不利的一面是，如果您需要更改任何内容，这将需要更多维护。

CSS：

ol.start4
{
    counter-reset: item 4;
    counter-increment: item -1;
}

ol.start6
{
    counter-reset: item 6;
    counter-increment: item -1;
}

HTML：

<div>
<ol>
<li>Item 1</li>
<li>Item 2
    <ol>
    <li>Item 1</li>
    <li>Item 2</li>
    </ol></li>
<li>Item 3
    <ol>
    <li>Item 1</li>
    <li>Item 2</li>
    </ol></li>
</ol>
</div>

<div>
<ol class="start4">
<li>Item 4
    <ol>
    <li>Item 1</li>
    <li>Item 2</li>
    </ol></li>
<li>Item 5</li>
</ol>
</div>

<div>
<ol class="start6">
<li>Item 6</li>
<li>Item 7
    <ol>
    <li>Item 1</li>
    <li>Item 2</li>
    </ol></li>
</ol>
</div>

Answer 2

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

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

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

更新：

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

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