css怎么使用計數器給元素自動編號

本文小編為大家詳細介紹“css怎么使用計數器給元素自動編號”，內容詳細，步驟清晰，細節處理妥當，希望這篇“css怎么使用計數器給元素自動編號”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學習新知識吧。

　　一、設置和使用css計數器，實現簡單的元素編號

　　為了創建和使用CSS計數器，遵循以下步驟：

　　1、設置計數器的名稱并將其重置為我們選擇的初始值。這是使用counter-reset屬性完成的。

　　counter-reset:標識符（計數器的名稱）<整數>（起始值,可選，默認值為0）;

　　初始化計數器（指定起始值）是可選的,如果沒有指定一個確切的值，它將會從零開始，則此時的計數器實現的內會從&lsquo;1&rsquo;開始。

　　counter-reset屬性是在要編號的元素的祖先或兄弟元素上設置的。例如，如果在文章中對標題進行編號，則可以在這些標題的祖先上設置計數器。

　　article{

　　/*設置一個名為“section”的計數器，并將其初始化為0*/

　　counter-reset：section0;

　　}

　　其背后的原因是，重置編號元素上的計數器將導致出現具有相同編號的元素。這是因為計數器將被重置為其初始值，然后在顯示之前對每個標題進行遞增。

　　2、指定計數器何時遞增，以及按什么值遞增。

　　例如，如果希望計數器在每次出現h3標題時遞增，那么將可以指定；這是使用counter-increment屬性完成的。我們可以選擇對每個出現的要編號的元素（本例中為h3）遞增計數器的任何值。默認情況下，計數器將遞增1；我們還可以使用負值，這樣計數器將遞減。

　　h3{

　　/*在每次出現h3時使用“section”計數器，并每次出現就增加1（默認值）*/

　　counter-increment：section1;

　　}

　　這里需要注意的一件重要事情是：計數器是在顯示之前遞增，因此如果我們希望第一個標題從1開始，則應該在計算器中將計數器的counter-reset屬性初始值設置為零。

　　3、顯示計數器

　　設置計數器并指定何時以及應該增加多少后，我們需要顯示該計數器。

　　要顯示計數器，我們就需要使用content屬性的counter()函數（或counters()嵌套計數器）作為::before偽元素的值。

　　在我們的示例中，我們是對h3標題進行編號，因此我們將在標題之前顯示計數器：

　　h3::before{

　　content：counter（section）;

　　}

　　當然，如果你希望在標題的數字和標題之間添加一些空格和可能的任何其他分隔符，可以通過將分隔符附加到計數器的counter()函數中來執行此操作，使用字符串作為值，例：

　　h3::before{

　　/*在數字之后加一個點，后面加上空格*/

　　content:counter(my-counter)".";

　　}

　　下面我來來看看示例：

　　html代碼：

　　<h3>css計數器的使用</h3>

　　<p>css計數器的使用css計數器的使用css計數器的使用css計數器的使用css計數器的使用</p>

　　<h3>css計數器的使用</h3>

　　<p>css計數器的使用css計數器的使用css計數器的使用css計數器的使用css計數器的使用</p>

　　css代碼：

　　body{

　　counter-reset:section;

　　}

　　h3:before{

　　counter-increment:section;

　　content:counter(section)".";

　　}

讀到這里，這篇“css怎么使用計數器給元素自動編號”文章已經介紹完畢，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領會，如果想了解更多相關內容的文章，歡迎關注億速云行業資訊頻道。