CSS Counters - Увеличение глубоко вложенных списков

0

У меня есть многостраничная форма, и каждая страница содержится в элементе списка. Каждый из этих элементов списка содержит упорядоченный список с вопросами в его элементах списка. Каждый из этих элементов списка содержит неупорядоченный список с выбором типов радио или флажков.

Я пытаюсь увеличить счетчики 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. Спасибо много :)

Теги:
nested-lists
css-content

1 ответ

1
Лучший ответ

Там вы идете: http://jsfiddle.net/S5CnU/

Вы захотите взглянуть на counter-increment CSS и 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 класса.

  • 0
    Это именно то, что я ищу. Большое спасибо :)

Ещё вопросы

Сообщество Overcoder
Наверх
Меню