我正在尝试写一本电子书,但在管理章节/小节/小节的计数器方面遇到了问题。
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>
这就是显示的内容:
所以我不知道为什么在`subsection'不重置的情况下,chapter
并且section
不坚持...
您需要将重置从伪元素中移出。另外,您可以重新格式化counter-reset
正文,以将所有这些语句包含在一个语句中。
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/
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句