Nested Orderd List with combination of numbers, alphatets and roman numerals for numbering?

前端 未结 2 1123
余生分开走
余生分开走 2021-01-12 08:41

I want to create an ordered list that looks like this:

1. Item_1
2. Item_2:
    a. Subitem_1
    b. Subitem_2:
        I. Sub-Subitem_1
        II. Sub-Subit         


        
相关标签:
2条回答
  • 2021-01-12 08:54
    <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

    0 讨论(0)
  • 2021-01-12 09:04

    This is certainly possible, given the following 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>
    

    And the 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.

    Or, you can be less strict about the specificity of the CSS selectors:

    ol {
        list-style-type: decimal;
    }
    
    ol ol {
        list-style-type: lower-alpha;
    }
    
    ol ol ol {
        list-style-type: upper-roman;
    }
    

    JS Fiddle demo.

    References:

    • list-style-type.
    0 讨论(0)
提交回复
热议问题