帶計數器的自動編號

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偽元素一起使用，插入生成的內容

創建或重置一個或多個計數器

總結

以上是生活随笔為你收集整理的html5计数器,CSS 计数器(counter)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。