css3增加了counter属性,可以实现任何元素的计数作用。
counter-increment 表明计数器实际用到的范围 。他的值也包括两部分:第一个为计数器的名字,即counter-reset设置好的名字,第二个值标识递增的值(默认为1),比如:
1 2 3 |
|
最后一个,content和counter搭配使用,content主要是跟 :after, :before,::after,::before来搭配用的,counter主要是给元素插入计数器的值。
带计数器的自动编号
CSS 计数器就像“变量”。变量值可以通过 CSS 规则递增(将跟踪它们的使用次数)。
如需使用 CSS 计数器,我们将使用以下属性:
- counter-reset - 创建或重置计数器
- counter-increment - 递增计数器值
- content - 插入生成的内容
- counter() 或 counters() 函数 - 将计数器的值添加到元素
如需使用 CSS 计数器,必须首先使用 counter-reset 创建它。
首先, counter-reset 主要功能是用来标识计数器的作用域的。它只能作用于选择器上,它的值包括两部分:第一部分为计数器的名字;第二部分为计数器的起始值(默认为0),counter-reset还可以同时声明多个计数器比如:
1 2 3 4 5 |
|
counter-increment 表明计数器实际用到的范围 。他的值也包括两部分:第一个为计数器的名字,即counter-reset设置好的名字,第二个值标识递增的值(默认为1),比如:
1 2 3 |
|
最后一个,content和counter搭配使用,content主要是跟 :after, :before,::after,::before来搭配用的,counter主要是给元素插入计数器的值。
下面的例子为页面(在 body 选择器中)创建一个计数器,然后为每个 <h2> 元素增加计数器值,并在每个 <h2> 元素的开头添加 "Section <value of the counter>:":
嵌套计数器
下面的例子为页面(section)创建一个计数器,为每个 <h1> 元素(subsection)创建一个计数器。
"section" 计数器为每个 <h1> 元素计数,同时写入 "Section" 以及 section 计数器的值,"subsection" 计数器为每个 <h2> 元素计数,同时写入 section 计数器的值以及 subsection 计数器的值:
列表计数器
计数器对于创建概述列表也很有用,因为在子元素中会自动创建一个计数器的新实例。在这里,我们使用 counters() 函数在不同级别的嵌套计数器之间插入一个字符串:
CSS 计数器属性
属性 | 描述 |
---|---|
content | 与 ::before 和 ::after 伪元素一同使用,来插入生成的内容。 |
counter-increment | 递增一个或多个计数器值。 |
counter-reset | 创建或重置一个或多个计数器。 |