Question

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

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

<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课程。

CSS计数器 - 增加深层嵌套列表

1 个答案: