使用CSS在HTML中自动生成编号列表

Question

我一直在为我的客户工作TNC。此内容将包含大量<li></li>个标记。因此，为了创建自动编号，我一直在使用下面的代码来实现魔术。

CSS：

ol {counter-reset: section;list-style-type: none;padding-left:0}
ol li {counter-increment: section;font-weight:700}
ol li:before {content: counters(section, ".") ". "}
ol li ol {padding-left:15px}
ol li ol li {margin:10px 0}
ul {list-style-type:lower-alpha}
ul li:before {content: ""}

HTML：

<ol>
    <li>
    <span class="underline">Title</span>
        <ol>
            <li>
                Content
            </li>
            <li>
                Content
            </li>
            <li>
                <span class="underline">Sub title</span>
                <ul>
                    <li>
                        Sub Content
                    </li>
                    <li>
                        Sub Content
                    </li>
                    <li>
                        Sub Content
                    </li>
                </ul>
            </li>
            <li>
                Content
            </li>
        </ol>
    </li>
</ol>

输出：

jsFiddle

问题是计数器似乎在lower-alpha样式列表后被破坏了。我想避免在此过程中使用javascript，因为此页面将使用AJAX在其他页面中调用。

Answer 1

TRY

ol {counter-reset: section;  list-style-type:none;padding-left:0}
ol li:before {counter-increment: section;font-weight:700;content: counters(section, ".") ". "}
ul {counter-reset: section;  list-style-type:lower-alpha}
ul li:before {counter-increment: section; content: ""}

working DEMO

更新

在counter-reset上为下一个（内部）商家信息添加ul

 ul {counter-reset: section;list-style-type:lower-alpha}
 ul  li {counter-increment: section;}
 ul li:before {content: ""}

Working Fiddle

详细了解 Using CSS counters