计数器不断在HTML/CSS中重置 [英] Counter keeps resetting in HTML/CSS
本文介绍了计数器不断在HTML/CSS中重置的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在尝试写一本电子书,但在管理章节/小节/小节的计数器方面遇到了问题.
I am trying to write an electronic book, and I'm having problems with counters for managing chapters/sections/subsections.
body {
counter-reset: chapter;
counter-reset: section;
counter-reset: subsection;
}
h1.chapter::before {
counter-reset: section;
counter-reset: subsection;
counter-increment: chapter;
content: "Chapter " counter(chapter) ": ";
}
h2.section::before {
counter-reset: subsection;
counter-increment: section;
content: "Section " counter(chapter) "." counter(section) ": ";
}
h3.subsection::before {
counter-increment: subsection;
content: "Subsection " counter(chapter) "." counter(section) "." counter(subsection) ": ";
}
<h1 class="chapter"> The first chapter</h1>
<h2 class="section"> The first section </h2>
<h2 class="section"> The second section </h2>
<h3 class="subsection"> The first subsection </h3>
<h3 class="subsection"> The second subsection </h3>
<h1 class="chapter"> The second chapter</h1>
<h2 class="section"> The second chapter's first section</h2>
<h3 class="subsection"> The second chapter's first subsection </h3>
这就是显示的内容:
所以我不知道为什么chapter
和section
只是在'subsection'不重置的情况下不粘住...
So I have no idea why the chapter
and section
just don't stick while `subsection' doesn't reset...
推荐答案
您需要将重置从伪元素中移出.另外,您可以在主体上重新设置counter-reset
的格式,以将它们全部包含在一个语句中.
You need to move the reset from the pseudo element. Also, you can reformat the counter-reset
on the body to include all of them in one statement.
body {
counter-reset: chapter section subsection;
}
h1.chapter::before {
counter-increment: chapter;
content: "Chapter " counter(chapter) ": ";
}
h1.chapter {
counter-reset: section;
}
h2.section::before {
counter-increment: section;
content: "Section " counter(chapter) "." counter(section) ": ";
}
h2.section {
counter-reset: subsection;
}
h3.subsection::before {
counter-increment: subsection;
content: "Subsection " counter(chapter) "." counter(section) "." counter(subsection) ": ";
}
<h1 class="chapter"> The first chapter</h1>
<h2 class="section"> The first section </h2>
<h2 class="section"> The second section </h2>
<h3 class="subsection"> The first subsection </h3>
<h3 class="subsection"> The second subsection </h3>
<h1 class="chapter"> The second chapter</h1>
<h2 class="section"> The second chapter's first section</h2>
<h3 class="subsection"> The second chapter's first subsection </h3>
这是一个玩弄的小提琴: https://jsfiddle.net/muc0q9aw/
Here is a fiddle to play with: https://jsfiddle.net/muc0q9aw/
这篇关于计数器不断在HTML/CSS中重置的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文