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

Posted xxllj

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了css设置某个选择器出现次数的计数器并输出相关的知识,希望对你有一定的参考价值。

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属性值:

说明
none 设置Content,如果指定成Nothing
normal 设置content,如果指定的话,正常,默认是"none"(该是nothing)
counter 设定计数器内容
attr(attribute) 设置Content作为选择器的属性之一。
string 设置Content到你指定的文本
open-quote 设置Content是开口引号
close-quote 设置Content是闭合引号
no-open-quote 如果指定,移除内容的开始引号
no-close-quote 如果指定,移除内容的闭合引号
url(url) 设置某种媒体(图像,声音,视频等内容)
inherit 指定的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设置某个选择器出现次数的计数器并输出的主要内容,如果未能解决你的问题,请参考以下文章

VSCode自定义代码片段6——CSS选择器

华为OD机试 - 字母计数(Python)| 真题+思路+代码

使用 CASE WHEN 将语言代码整理成一个组合语言环境代码,并计算组合语言环境代码在某个日期出现的次数

华为OD机试真题Java实现字母计数真题+解题思路+代码(2022&2023)

animation(动画)设置

css3 新属性