Question

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

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

所以我看起来像这样：

列出项目

1.1列表项

1.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 - （我设置了开始=＆＃34; 5＆＃34;表明它正在工作;为了您的目的，只需将其设置为3或您需要的东西）

<强>更新

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

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

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

2 个答案: