html5计数器,CSS 计数器(counter)

带计数器的自动编号

CSS计数器就像“变量”。变量值可以通过CSS规则递增(它将跟踪它们被使用的次数)。要使用CSS计数器，我们将使用以下属性：

counter-reset - 创建或重置计数器

counter-increment - 增加计数器值

content - 插入生成的内容

counter()或counters()函数 - 将计数器的值添加到元素

要使用CSS计数器，必须首先使用counter-reset创建。 下面的示例为页面创建一个计数器(在body选择器中)，然后递增每个

元素的计数器值，并将“选项 < 计数器的值 >：”添加到每个

元素的开头：

教程(jc2182.com)

body {

counter-reset: section;

}

h2::before {

counter-increment: section;

content: "选项 " counter(section) ": ";

}

使用CSS计数器:

HTML教程

CSS教程

JavaScript教程

注意: 只有在指定了!DOCTYPE时，IE8才支持这些属性。

嵌套计数器

以下示例为页面(节)创建一个计数器，为每个

元素(子节)创建一个计数器。对于每个

元素，“section”计数器将计为“Section < 值的分区计数器 >。”，并且“subsection”计数器将计入每个

元素，记入“==< 分段计数器的值 >“：

教程(jc2182.com)

body {

counter-reset: section;

}

h1 {

counter-reset: subsection;

}

h1::before {

counter-increment: section;

content: "分区计数器的值 " counter(section) ". ";

}

h2::before {

counter-increment: subsection;

content: counter(section) "." counter(subsection) " ";

}

HTML教程:

HTML教程

CSS教程

Scripting教程:

JavaScript

VBScript

XML教程:

XML

XSL

注意:只有在指定了!DOCTYPE时，IE8才支持这些属性。

属性

描述

与::before和::after伪元素一起使用，插入生成的内容

创建或重置一个或多个计数器