Question

我想创建一个如下所示的有序列表：

1. Item_1
2. Item_2:
    a. Subitem_1
    b. Subitem_2:
        I. Sub-Subitem_1
        II. Sub-Subitem_2
    c. Subtiem_3
3. Item 3

即。子列表应使用字母/罗马数字或其他此类符号进行编号。

我尝试嵌套<ol>标签但是明确编号了子列表。有没有办法使用仅HTML ？

执行此操作

Answer 1

考虑到以下HTML，这当然是可能的：

<ol>
    <li>Item_1</li>
    <li>Item_2:
        <ol>
            <li>Subitem_1</li>
            <li>Subitem_2:
                <ol>
                    <li>Sub-Subitem_1</li>
                    <li>Sub-Subitem_2</li>
                </ol></li>
            <li>Subitem_3</li>
        </ol></li>
    <li>Item 3</li>
</ol>

CSS：

ol {
    list-style-type: decimal;
}

ol > li > ol {
    list-style-type: lower-alpha;
}

ol > li > ol > li > ol {
    list-style-type: upper-roman;
}

JS Fiddle demo

或者，您可以对CSS选择器的特异性不那么严格：

ol {
    list-style-type: decimal;
}

ol ol {
    list-style-type: lower-alpha;
}

ol ol ol {
    list-style-type: upper-roman;
}

JS Fiddle demo

参考文献：

list-style-type。

Answer 2

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

1   Default. Decimal numbers (1, 2, 3, 4)
a   Alphabetically ordered list, lowercase (a, b, c, d)
A   Alphabetically ordered list, uppercase (A, B, C, D)
i   Roman numbers, lowercase (i, ii, iii, iv)
I   Roman numbers, uppercase (I, II, III, IV)

http://www.w3schools.com/tags/att_ol_type.asp

嵌套有序列表，数字，字母和罗马数字的组合用于编号？

2 个答案: