2

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

列表中的每个项目都可以有子项目。

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

  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 代码。

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

4

2 回答 2

-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>
于 2013-07-30T13:58:34.413 回答
-1

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

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

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

更新：

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

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

于 2013-07-30T14:10:30.250 回答