我有一个多页表单,每个页面都包含在一个列表项中。这些列表项中的每一个都包含一个有序列表,其列表项中包含问题。这些列表项中的每一个都包含一个无序列表,其中可以选择单选或复选框输入类型。
我正在尝试让 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 计数器。非常感谢:)
最佳答案
你会想看看 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
类。
关于html - CSS 计数器 - 递增深度嵌套列表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18927837/