css 电子计数器 |兼容ie的css写法

在CSS中，大家可以使用电子计数器实现不同的效果。电子计数器是CSS3引入的一个新功能，它可以让大家在网页中提供数字计数的效果。 使用电子计数器，大家可以在文字中添加数字序号，仅仅需要在样式表中定义计数器的名称和初始值。例如，以下是一个简单的电子计数器的例子：

body {
counter-reset: my-counter;
}
p::before {
content: counter(my-counter);
counter-increment: my-counter;
}

在这个例子中，大家首先使用`counter-reset`属性定义了一个名为`my-counter`的计数器，并且将它的初始值设置为0。接着，在`p`元素之前添加了一个伪元素`::before`，并且使用`content`属性将`my-counter`的当前值添加到`p`元素之前的文本中。最后，大家使用`counter-increment`属性对`my-counter`进行了递增操作，以便在每个`p`元素之前添加一个新值。 当大家使用这个样式表时，大家会发现每个`p`元素都具有一个唯一的序号。这个序号是从1开始的，并且在每个`p`元素之前都会递增。 除了在文本中使用电子计数器之外，大家还可以在列表中使用它。例如，以下是一个有序列表的例子：

ol {
counter-reset: my-counter;
}
li::before {
content: counter(my-counter) ". ";
counter-increment: my-counter;
}

在这个例子中，大家使用`counter-reset`属性定义了一个计数器`my-counter`，它的初始值为0。接着，在每个列表项`li`之前添加了一个伪元素`::before`，并且在每个序号之后添加了一个句点。最后，大家使用`counter-increment`属性对`my-counter`进行了递增操作。 当大家使用这个样式表时，大家会发现每个有序列表都具有一个唯一的序号，并且在每个列表项之前都会递增。序号之后的句点也是自动添加的。 总的来说，电子计数器是一种非常实用的功能，它可以让大家在网页中为不同的元素添加数字序号。如果您还不熟悉这个功能，那么大家希望以上的例子能够让您更好地理解和应用它。