2

我已经创建了一个问题列表，并计划在未来添加更多问题。我想使用 CSS 对问题进行编号，例如每个问题都在下面给出的部分中。

<section class = "question">The Question</section>

有没有办法使用“问题”类自动给它们编号？

4

1 回答 1

3

是的，您可以使用 :before 伪元素和 CSS 计数器：

body {
  counter-reset: section;                   /* Set the section counter to 0 */
}
section.question::before {
  counter-increment: section;               /* Increment the section counter*/
  content:  counter(section) ": "; /* Display the counter */
}
<section class="question">The Question</section>
<section class="question">The Question</section>
<section class="question">The Question</section>
<section class="question">The Question</section>

您可以在https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Counters和http://www.w3.org/TR/CSS2/generate.html#阅读有关 CSS 计数器的更多信息生成.html#counters

于 2015-05-03T04:42:24.413 回答