html - 包含数字、字母和罗马数字组合的嵌套有序列表用于编号？

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 .