CSS counter-increment 属性

CSS counter-increment 属性

CSS counter-increment 属性用于递增 CSS 计数器的值，以便在文档中为元素编号或跟踪显示其他数据。

语法

counter-increment: none|name [number];
  • none：不改变计数器值（默认值）。
  • name：计数器的名称。
  • number：计数器递增的值。默认为 1。

例子

计数器从 1 开始递增：

body {
  counter-reset: myCounter;
}

h1:before {
  counter-increment: myCounter;
  content: "Section " counter(myCounter) ". ";
}

计数器从 5 开始递增：

body {
  counter-reset: myCounter 5;
}

h1:before {
  counter-increment: myCounter;
  content: "Section " counter(myCounter) ". ";
}

计数器用法

计数器使用在内容生成技术中，它允许自动编号或为元素跟踪其他数据。以下是一些示例：

列表编号

ol {
  counter-reset: myCounter;
}

li {
  counter-increment: myCounter;
}

li:before {
  content: counter(myCounter) ". ";
}

图片编号

img {
  counter-reset: myImage;
}

img:before {
  counter-increment: myImage;
  content: "Image " counter(myImage);
}

表格行数

table {
  counter-reset: myRow;
}

tr {
  counter-increment: myRow;
}

tr:before {
  content: counter(myRow) ". ";
}

结语

CSS 计数器提供了一种可用于自动编号的强大工具，使用起来也非常灵活和方便。通过修改计数器属性，可以在不同的元素中重复使用同一计数器的值。

CSS content 属性 CSS counter-reset 属性