У меня есть многостраничная форма, и каждая страница содержится в элементе списка. Каждый из этих элементов списка содержит упорядоченный список с вопросами в его элементах списка. Каждый из этих элементов списка содержит неупорядоченный список с выбором типов радио или флажков.
Я пытаюсь увеличить счетчики 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. Спасибо много :)
Там вы идете: 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
класса.