css如何使用計數器為元素自動編號？本篇文章就跟大家介紹設定和使用css計數器的方法。有一定的參考價值，有需要的朋友可以參考一下，希望對你們有幫助。
在之前的文章【css計數器（counter）是什麼】中我們簡單介紹了css計數器的相關屬性，以及透過程式碼實例來簡單了解了一下css計數器的使用，本篇文章我們就來具體看看css計數器是如何設定和使用的，如何實現元素自動編號的。 【相關影片教學推薦：CSS3教學】
一、設定與使用css計數器，實作簡單的元素編號
##為了建立和使用CSS計數器，請遵循以下步驟：
1、設定計數器的名稱並將其重設為我們選擇的初始值。
這是使用counter-reset屬性完成的。counter-reset: 标识符（计数器的名称） <整数>（起始值,可选，默认值为0）;
article {
/ *设置一个名为“section”的计数器，并将其初始化为0 * /
counter-reset：section 0 ;
}2、指定計數器何時遞增，以及以什麼值遞增。
例如，如果希望計數器在每次出現h2標題時遞增，那麼將可以指定；這是使用counter-increment屬性完成的。我們可以選擇對每個出現的要編號的元素（本例中為h2）遞增計數器的任何值。預設情況下，計數器將遞增1；我們也可以使用負值，這樣計數器將會遞減。h2 {
/ *在每次出现h2时使用“section”计数器，并每次出现就增加1（默认值）* /
counter-increment：section 1 ;
}計數器是在顯示之前遞增
#，因此如果我們希望第一個標題從1開始，則應該在計算器中將計數器的counter-reset屬性初始值設定為零。3、顯示計數器
設定計數器並指定何時以及應該增加多少後，我們需要
。
要顯示計數器，我們就需要使用content屬性的counter()函數（或counters()巢狀計數器）作為::before偽元素的值。
在我們的範例中，我們是對h2標題進行編號，因此我們將在標題之前顯示計數器：
h2 :: before {
content：counter（section）;
}h2::before {
/* 在数字之后加一个点，后面加上空格 */
content: counter(my-counter) ". ";
}<h2>css计数器的使用</h2>
<p>css计数器的使用css计数器的使用css计数器的使用css计数器的使用css计数器的使用</p>
<h2>css计数器的使用</h2>
<p>css计数器的使用css计数器的使用css计数器的使用css计数器的使用css计数器的使用</p>css程式碼：
body{
counter-reset: section;
}
h2:before{
counter-increment: section;
content: counter(section) ".";
}效果圖：
##二、設定巢狀計數器，實現元素的巢狀編號
有時在一個大標題下面還會有多個2級標題，3級標題，標題一個嵌套一個（如，下圖），如何編號？
下面我們就來介紹使用巢狀計數器，來實現元素的巢狀編號的方法。
要實現元素的巢狀編號，最簡單的方法就是使用
counters()函數；使用該函數，我們可以在一個宣告中設定多個計數器，預設情況下這些計數器將嵌套。
範例介紹：我們將使用counters()函數在巢狀清單上設定巢狀計數器。列表（ul，ol）可以嵌套到標記中的幾個級別，因此我們可以使用counters()函數。
html程式碼：
<div class="container">
<ul>
<li> 菜单1
<ul>
<li>菜单1.1</li>
<li>菜单1.2</li>
<li>菜单1.3
<ul>
<li>菜单1.3.1</li>
<li>菜单1.3.2</li>
<li>菜单1.3.3</li>
<li>菜单1.3.4</li>
</ul>
</li>
</ul>
</li>
<li>菜单2
<ul>
<li>菜单2.1</li>
<li>菜单2.2</li>
<li>菜单2.3</li>
</ul>
</li>
</ul>
</div>css程式碼：#首先我們要建立一個計數器，定義計數器的名稱為：nested-counter，初始化值為：0；增量為：1。
ul {
list-style: none;/* 去除ul中默认的样式*/
counter-reset：nested-counter;
}
ul li {
counter-increment：nested-counter;
line-height: 1.6;
}ul li ：before {
/ * counters（）函数内的字符串是两个计数器之间的分隔符，并且函数外部的字符串是生成的数字和列表项的文本之间的分隔符* /
content: counters(nested-counter, ".") ") ";
font-weight: bold;
}计数器也是可以设置样式的，不仅仅可以用数字来显示编号，还可以是字母（如a，A）,罗马字符（如：ⅰ，ⅱ）等等，只要是css list-style-type属性可用的列表样式类型中的任何一种都可以来设置计数器的样式。在之前的文章【css如何设置列表样式？列表样式的实现】中有介绍，大家可以参考一下。
那么如何设置？
这就需要设置style参数，我们来看看基本语法：
counter(name，style) counters(name，分隔符，style)
name：计数器名称，style就是样式了。
以下是所有可能的计数器样式：
disc | circle | square | decimal | decimal-leading-zero | lower-roman | upper-roman | lower-greek | lower-latin | upper-latin | armenian | georgian | lower-alpha | upper-alpha | none | inherit
总结：以上就是本篇文章的全部内容，希望能对大家的学习有所帮助。
以上是css如何使用計數器為元素自動編號？ css計數器的使用（程式碼範例）的詳細內容。更多資訊請關注PHP中文網其他相關文章！
