通过 CSS 重复的数字系列

Question

我正在尝试做这样的事情：

<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 进行自动编号 - 但我不知道是否有办法重复编号的系列。

Answer 1

一种方法是使用 CSS counters 并在每次遇到 h2 时重置它们，如下面的代码段所示。

h2 选择器中的 counter-reset 属性将 h2 计数器的值设置为 1，将 h3 计数器的值设置为 0 (默认）每次遇到 h2 元素时。

每次遇到 h3 元素时，h3 选择器中的 counter-increment 属性都会递增 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);
}

通过 CSS 重复的数字系列

Repeated series of number via CSS

css

css-counter