CSS 计数器 - 递增深度嵌套列表

Question

我有一个多页表单，每个页面都包含在一个列表项中。这些列表项中的每一个都包含一个有序列表，其列表项中包含问题。这些列表项中的每一个都包含一个无序列表，其中可选择单选或复选框输入类型。

我正在尝试让 CSS 计数器在有序列表的列表项上递增。

这是一个基本示例：http://jsfiddle.net/wCbvb/

<ol>
    <li>
        <h1>Page 1</h1>
        <ol>
            <li>
                <h2>Question 1</h2>
                <ul>
                    <li>Answer</li>
                    <li>Answer</li>
                    <li>Answer</li>
                    <li>Answer</li>
                </ul>
            </li>
            <li>
                <h2>Question 2</h2>
                <ul>
                    <li>Answer</li>
                    <li>Answer</li>
                    <li>Answer</li>
                    <li>Answer</li>
                </ul>
            </li>
        </ol>
    </li>
    <li>
        <h1>Page 2</h1>
        <ol>
            <li>
                <h2>Question 3</h2>
                <ul>
                    <li>Answer</li>
                    <li>Answer</li>
                    <li>Answer</li>
                    <li>Answer</li>
                </ul>
            </li>
            <li>
                <h2>Question 4</h2>
                <ul>
                    <li>Answer</li>
                    <li>Answer</li>
                    <li>Answer</li>
                    <li>Answer</li>
                </ul>
            </li>
        </ol>
    </li>
    <li>
        <h1>Page 3</h1>
        <ol>
            <li>
                <h2>Question 5</h2>
                <ul>
                    <li>Answer</li>
                    <li>Answer</li>
                    <li>Answer</li>
                    <li>Answer</li>
                </ul>
            </li>
            <li>
                <h2>Question 6</h2>
                <ul>
                    <li>Answer</li>
                    <li>Answer</li>
                    <li>Answer</li>
                    <li>Answer</li>
                </ul>
            </li>
        </ol>
    </li>
</ol>

我正在尝试获取问题（包含 h2 的列表项）以增加计数器并继续进入下一个列表。我不确定这是否可能，感谢您的关注。我只会使用 CSS 计数器来使用纯 CSS 解决方案。非常感谢:)

Answer 1

你去：http://jsfiddle.net/S5CnU/

您将需要查看 CSS counter-increment 和 counter-reset 以及 content、:before 和 :after。

在上面的示例中，您不再需要输入问题编号，它已经由 CSS 处理。

.questions {
    counter-reset: question;   
}

.questions > li > ol > li {
    list-style-type:none;
}

.questions > li > ol > li > h2:after { 
    content: counter(question);
}

.questions > li > ol > li > h2:before {
    counter-increment: question;
    content: counter(question) ":= ";
}

注意：我为您的第一个 ol 提供了 questions 类。