css设置某个选择器出现次数的计数器并输出

标签：ogre   ble   res   enc   hidden   att   nothing   hid   计数   

1、counter-reset 属性
用法：counter-reset 属性设置某个选择器出现次数的计数器的值。默认为 0。

说明：利用这个属性，计数器可以设置或重置为任何值，可以是正值或负值。如果没有提供 number，则默认为 0。

注释：如果使用 “display: none”，则无法重置计数器。如果使用 “visibility: hidden”，则可以重置计数器。

2、counter-increment 属性
用法：counter-increment 属性设置某个选取器每次出现的计数器增量。默认增量是 1。

说明：利用这个属性，计数器可以递增（或递减）某个值，这可以是正值或负值。如果没有提供 number 值，则默认为 1。

注释：如果使用了 “display: none”，则无法增加计数。如使用 “visibility: hidden”，则可增加计数。

3、content 属性

content 属性与 :before 及 :after 伪元素配合使用，来插入生成内容。

content属性值：

#progressbar {
	counter-reset: step;
}
#progressbar li:before {
	content: counter(step);
	counter-increment: step;
}
#progressbar li:after {
	content: ‘‘;
}
#progressbar li:first-child:after {
	content: none; 
}

css设置某个选择器出现次数的计数器并输出

标签：ogre   ble   res   enc   hidden   att   nothing   hid   计数   

原文地址：https://www.cnblogs.com/ccllj/p/9174806.html