我正在尝试做这样的事情：
<h2>1.1 Bananas</h2>
<h3>1.1.1 </h3>
<h3>1.1.2 </h3>
<h3>1.1.3 </h3>
<h2>1.1 Apples</h2>
<h3>1.1.1 </h3>
<h3>1.1.2 </h3>
<h3>1.1.3 </h3>
<h2>1.1 Oranges</h2>
<h3>1.1.1</h3>
<h3>1.1.2</h3>
<h3>1.1.3</h3>
注意数字系列如何重复。
我可以通过 CSS 进行自动编号 - 但我不知道是否有办法重复编号系列。
一种方法是使用 CSScounters https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Counters并在每次重置它们h2遇到的情况如下面的代码片段所示。
The counter-reset内的财产h2选择器设置的值h2与 1 相反h3每次 a 时计数器都为 0（默认）h2遇到元素。
The counter-increment内的财产h3选择器增加的值h3每次计数器h3遇到元素。
h2 {
counter-reset: h2 1 h3 0;
}
h2:before {
content: "1." counter(h2);
}
h3 {
counter-increment: h3;
}
h3:before {
content: "1." counter(h2)"." counter(h3);
}
<h2>Bananas</h2> <!-- h2 counter = 1, h3 counter = 0 -->
<h3></h3> <!-- h2 counter = 1, h3 counter = 1 (increment) -->
<h3></h3> <!-- h2 counter = 1, h3 counter = 2 (increment) -->
<h3></h3> <!-- h2 counter = 1, h3 counter = 3 (increment) -->
<h2>Apples</h2> <!-- h2 counter = 1 (reset), h3 counter = 0 (reset) -->
<h3></h3> <!-- h2 counter = 1, h3 counter = 1 (increment) -->
<h3></h3> <!-- h2 counter = 1, h3 counter = 2 (increment) -->
<h3></h3> <!-- h2 counter = 1, h3 counter = 3 (increment) -->
<h2>Oranges</h2> <!-- h2 counter = 1 (reset), h3 counter = 0 (reset) -->
<h3></h3> <!-- h2 counter = 1, h3 counter = 1 (increment) -->
<h3></h3> <!-- h2 counter = 1, h3 counter = 2 (increment) -->
<h3></h3> <!-- h2 counter = 1, h3 counter = 3 (increment) -->
事实上，你甚至不需要h2计数器适合您的情况，因为该值始终为 1。因此，即使 CSS 中的以下内容也足够了：
h2 {
counter-reset: h3 0;
}
h2:before {
content: "1.1";
}
h3 {
counter-increment: h3;
}
h3:before {
content: "1.1." counter(h3);
}
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
