HTML 自定义列表排序(包含非英语字符的字母列表)

Question

我想知道如何创建如下所示的有序列表。

a. Item 1

b. Item 2

c. Item 3

ç. Item 4

...

我认为通常下面的标记应该满足我的要求:

<ol type="a">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li value="ç">Item 4</li>
    ...
</ol>

但它似乎没有效果，它只是给了我常规的排序“a，b，c，d...”

Answer 1

通常情况下，列表不是这样工作的。如果 list-style-type 为 lower-latin，则仅显示小写拉丁字母。在“z”之后，继续“aa”，依此类推。

但是，完全可以通过一些自定义 CSS 来完成您想要的操作。

li[value] {list-style-type:none; position:relative}
li[value]::before {content:attr(value) '. ';
position:absolute; right:calc(100% + .33em);}

<ol type="a">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li value="ç">Item 4</li>
    <li>Item 5</li>
</ol>

---

抱歉，上述解决方案仅适用于 value 属性是非数字值。如果您输入 value="9" 或其他内容，它将干扰列表其余部分的编号:下一项的值为 10，并且将得到“j”。作为列表标记!

因此，更好的解决方案是单独保留 value 并使用 data 属性。 数据标记或其他东西。那么列表中的其余部分将不会遭受任何后果。

li[data-marker] {list-style-type:none; position:relative}
li[data-marker]::before {content:attr(data-marker) '. ';
position:absolute; right:calc(100% + .33em);}

<ol type="a">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li data-marker="ç">Item 4</li>
    <li>Item 5</li>
</ol>

另外一点:如果您的目的是在非重音字母之间插入重音字母，例如，如果列表看起来像 a、b、c、ç、d 等，那么您将需要使用 value 才能使列表正确显示。乱序的列表项需要重新同步!

li[data-marker] {list-style-type:none; position:relative}
li[data-marker]::before {content:attr(data-marker) '. ';
position:absolute; right:calc(100% + .33em);}

<ol type="a">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li data-marker="ç" value="3">Item 4</li> <!-- Items 3 & 4 both get value 3 for "c" -->
    <li>Item 5</li>
</ol>