CSS计数器-递增深层嵌套列表 [英] CSS Counters - Incrementing Deeply Nested Lists

问题描述

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

I have a multi-page form and each page is contained within a list item. Each of those list items contains an ordered list with questions in its list items. Each of those list items contains an unordered list with a selection of either radio or checkbox input types.

我正在尝试使CSS计数器在有序列表的列表项上增加.

I'm trying to get CSS counters to increment on the ordered list's list items.

这是一个基本示例: 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解决方案.非常感谢:)

I'm trying to get the questions (the list items which contain the h2's) to increment the counter and continue into the next list. I'm not sure if this is possible or not, thanks for looking. I would only use a pure CSS solution to this using CSS counters. Thank you much :)

推荐答案

您去了: http://jsfiddle.net /S5CnU/

您将要了解CSS counter-increment和counter-reset以及content，:before和:after.

You will want to take a look at CSS counter-increment and counter-reset along with content, :before and :after.

在上面的示例中，您不再需要保留问题号"类型，它已经由CSS处理.

In the example above you no longer need to keep type Question number in, it is already handled by 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.

Note: I gave your first ol the questions class.

这篇关于CSS计数器-递增深层嵌套列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！