HTML 有序列表格式

Question

是否可以按以下格式获取我的订购列表？

heading
1.1. text...
1.2. text
1.2.1 text

Another heading
1.3. text
1.3.1. text
1.3.2. text
1.4. text

这可能吗？谢谢

Answer 1

ol { counter-reset: item }
li { display: block }
li:before { content: counters(item, ".") " "; counter-increment: item }

<ol>
    <li> Cat</li>
    <li>Bat</li>
    <li>Mat
        <ol>
            <li>Red Mat</li>
            <li>Green Mat</li>
        </ol>
    </li>
    <li>Pat</li>
    
</ol>

Answer 2

.contract ol {
    counter-reset: item
}
.contract li.paragraph {
    counter-increment: item;
}
.contract li li.paragraph:before {
    content: counters(item, ".")" ";
}
.contract li {
    list-style-type: none;
}
.contract ol {
    padding-left: 0;
}

<section class="contract">
    <ol>
        <li class="paragraph">
            <ol>
                <li>
                     <h2>Heading</h2>

                </li>
                <li class="paragraph">text</li>
                <li class="paragraph">text
                    <ol>
                        <li class="paragraph">text</li>
                    </ol>
                </li>
                <li>
                     <h2>Another heading</h2>

                </li>
                <li class="paragraph">text
                    <ol>
                        <li class="paragraph">text</li>
                        <li class="paragraph">text</li>
                    </ol>
                </li>
                <li class="paragraph">text</li>
            </ol>
        </li>
    </ol>
</section>

HTML 有序列表格式

HTML ordered list formatting

html

css

format