带有起始索引的 HTML 嵌套编号列表-Java 学习之路

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

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

所以我看起来像这样：

项目清单

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-th item，其中 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 代码。

知道如何做这样的事吗？

2 回答

0

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

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

工作小提琴 - (我设置 start =“5”表示它正常工作;为了您的目的，只需将其设置为 3 或您需要的)

更新：

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

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

回复于 2024-06-02T21:07:08+08:00

来自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>

回复于 2024-06-02T21:07:08+08:00

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

2 回答

相关问题