如何为 HTML 中的 <li> 元素定义自定义名称？

Question

我想定义一个有序列表，如下所示：

3. Foo
   1. Foo
   2. Bar
3a. Bar

我已经知道我可以使用

<ol start=3></ol>

跳过项目 1 和 2 的标记，但我不知道 如何让最后一个元素按名称使用“3a”，而不像这样嵌套另一个列表: "3.a.Bar".

这在 HTML 中甚至可能吗？

Answer 1

好像不能合并字母和数字，看到documentation of ol HTML

Syntax

<ol type="1|a|A|i|I">

|表示或，一次只能使用一个（我试过type="1a"但是不行）。

Answer 2

你可以这样做：

HTML:

<ol>
  <li>One</li>
  <li>Two</li>
  <li class="newList">Three</li>
  <li>Four</li>
 </ol>

CSS:

ol {
    counter-reset: item;
    margin-left: 0;
    padding-left: 0;
}
li {
    display: block;
    margin-bottom: .5em;
    margin-left: 2em;
}

.newList:before{
 content: counter(item) "a " ;
}

li:before {
    display: inline-block;
    content: counter(item) ;
    counter-increment: item;
    width: 2em;
    margin-left: -2em;
}

勾选Fiddle

如何为 HTML 中的 <li> 元素定义自定义名称？

How to define a custom name for <li> element in HTML?

html

list

html-lists