html - 使用 CSS #Part II 在 HTML 中自动生成编号列表

Question

在my previous question ，我一直在使用 CSS 为 <li></li> 创建自动生成的列表编号标签。在另一项任务中，我需要创建另一个列表，其标题位于列表之间，如下图所示。

上面的例子可以用下面的代码实现

HTML

<ol class="main">
    <span class="title">Title</span>
    <li>
        Content
    </li>
    <li>
        Content
    </li>
    <span class="title">Title</span>
    <li>
        Content
    </li>
</ol>

CSS

ul {counter-reset:section}
li {margin:15px 0;text-align:justify}
li:before {counter-increment:section;content:""}
.main {list-style-position:inside;list-style-type:none;padding:0}
.main span {font-weight:700;text-decoration:underline}
.inner {padding:0}
.inner ul {counter-reset:section}
.inner ul > li:before {content:""}
ul {list-style-type:lower-alpha}

但是，此代码在某些浏览器(如 Opera)中不起作用。这是因为在 HTML 5 中，<span></span>标签不能嵌套在元素 <ol></ol> 中.

jsFiddle适用于 Firefox、Chrome 和 Internet Explorer。

Answer 1

Here's a pure CSS version适用于 Chrome 26 和 FF 20(尚未在其他浏览器上测试)。与您之前的问题不同的是，您不需要每次都重置计数器。

/* Don't reset every time!!! */
/* ol.inner {counter-reset:section;} */

ol.inner li {counter-increment:section;}
ol.inner li:before {content: counters(section,"") ". ";}