通过CSS重复的数字序列 [英] Repeated series of number via CSS

问题描述

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

I'm trying to do something like this:

<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>

请注意数字序列的重复方式.

Notice how the number series repeats.

我可以通过CSS进行自动编号-但是我不知道是否有办法重复编号的序列.

I can do autonumbering via CSS - but I can't figure out if there's a way to repeat the numbered series.

推荐答案

一种使用CSS的方法

One way would to be use CSS counters and reset them every time a h2 is encountered like in below snippet.

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

The counter-reset property within the h2 selector sets the value of the h2 counter to 1 and that of the h3 counter to 0 (default) everytime a h2 element is encountered.

每次 h3 时， h3 选择器中的 counter-increment 属性都会递增 h3 计数器的值.元素.

The counter-increment property within the h3 selector increments the value of the h3 counter everytime a h3 element is encountered.

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中的以下内容也足够了:

Actually, you don't even need the h2 counter for your case because the value is always 1. So even the below in CSS would suffice:

h2 {
  counter-reset: h3 0;
}
h2:before {
  content: "1.1";
}
h3 {
  counter-increment: h3;
}
h3:before {
  content: "1.1." counter(h3);
}

这篇关于通过CSS重复的数字序列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！