Question

我希望制作如下所示的有序列表。编号必须按照原来的方式进行分解，即在6,66,6B之后的2A，6之后的6，然后是7。

1.  Text goes here
2.  More text here
2A. This is what I need
3.  List continues like this
4.  And it goes on
5.  And on
6.  But here
6A. There is another sub section
6B. And another
6C  And another
7.  Is this possible?
8.  Please guide me.

编辑：我打算在这里做的是将一部宪法立法数字化。有第1,2,3,4,5,6和7节，修正案插入了第2A，6A，6B和6C部分。在纸上有意义避免重新编号部分并以这种方式插入新部分，但我想纯粹通过HTML来完成。我没有使用任何服务器端脚本，只有HTML，CSS，可能包含一些Java。

我已经拥有的代码是简单列表：

Answer 1

您可以将每个项目设为div元素，并将这些数字包含在内容中。如果您希望在示例中使用表格外观，则可以使用table元素，其中数字在一列中，文本在另一列中：

<table>
<tr><td>1.<td>Text goes here
<tr><td>2.<td> More text here
<tr><td>2A<td>This is what I need
...
</table>

（您可以在第一列th元素而不是td中创建单元格，理由是它们是类似标题的行标题，并且应该被辅助软件视为标题。但是然后你可能想在CSS中说th { text-align: left; font-weight: normal }。）

这意味着如果添加，移动或删除项目，则必须修改内容中的编号，但无论如何这似乎都是相当定制的编号。

如果您被迫使用ol，那么您需要一些复杂的CSS来删除默认编号（简单部分）并将您的数字添加为生成的内容。但由于列表的特殊性，这也要求编号方案的部分硬连线到代码中。

Answer 2

这是一个工作小提琴，使用@Joren提到的计数器：

http://jsfiddle.net/erKURITA/EruGX/7/

基本上你想要的是几个以嵌套和li元素为目标的选择器：

ol {
    list-style-type: none;
    counter-reset: sub_index;
}

:not(li) > ol > li {
    counter-increment: index;
}

li > ol > li:before {
    counter-increment: sub_index;
    content: counter(index,decimal)'.'counter(sub_index,upper-alpha)' ';
}

:not(li) > ol > li:before {
    content: counter(index,decimal)' ';
}

~~将“top”类添加到最顶层的li中，然后进行设置。~~

编辑：使用不使用类

的版本更新

打破有序列表

2 个答案: