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