counter-increment

Avatar of Sara Cope
Sara Cope

DigitalOcean 为您旅程的每个阶段提供云产品。立即开始使用 200 美元的免费额度!

有序列表不是唯一可以自动编号的元素。借助各种与计数器相关的属性,任何元素都可以。

<body>
  <section></section>
  <section></section>
  <section></section>
  <section></section>
</body>
body {
  counter-reset: my-awesome-counter;
}
section {
  counter-increment: my-awesome-counter;
}
section:before {
  content: counter(my-awesome-counter);
}

每个 <section> 将分别以“1”、“2”、“3”或“4”开头。

您可以通过逗号分隔计数器函数来控制计数器的样式。例如,要使它们使用罗马数字

section:before {
  content: counter(my-awesome-counter, upper-roman);
}

演示

在 CodePen 上

更多信息

浏览器支持

Chrome Safari Firefox Opera IE Android iOS
2+ 3.1+ 任何 9.2+ 8+ 待定 待定