使用方法
- 可以使用以下属性来操作CSS计数器:
- counter-reset: 用于定义和初始化一个新的计数器。
- counter-increment: 用于增加计数器的值。
- content: 用于在元素中显示计数器的值。
- 可以通过设置不同的选择器和属性来控制不同元素的计数器行为。
适用范围
作用
- CSS计数器可以用于创建有序列表、标记不同章节或段落等场景。
示例
<!DOCTYPE html>
<html>
<head>
<style>
/*定义计数器*/
body {
counter-reset: section;
}
h2::before {
counter-increment: section;
content: "Section " counter(section) ": ";
}
</style>
</head>
<body>
<h2>Introduction</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<h2>Benefits</h2>
<p>Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</body>
</html>father:: CSS