css怎么使用計數(shù)器給元素自動編號

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

　　一、設(shè)置和使用css計數(shù)器，實(shí)現(xiàn)簡單的元素編號

　　為了創(chuàng)建和使用CSS計數(shù)器，遵循以下步驟：

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

　　counter-reset:標(biāo)識符（計數(shù)器的名稱）<整數(shù)>（起始值,可選，默認(rèn)值為0）;

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

　　counter-reset屬性是在要編號的元素的祖先或兄弟元素上設(shè)置的。例如，如果在文章中對標(biāo)題進(jìn)行編號，則可以在這些標(biāo)題的祖先上設(shè)置計數(shù)器。

　　article{

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

　　counter-reset：section0;

　　}

　　其背后的原因是，重置編號元素上的計數(shù)器將導(dǎo)致出現(xiàn)具有相同編號的元素。這是因?yàn)橛嫈?shù)器將被重置為其初始值，然后在顯示之前對每個標(biāo)題進(jìn)行遞增。

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

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

　　h3{

　　/*在每次出現(xiàn)h3時使用“section”計數(shù)器，并每次出現(xiàn)就增加1（默認(rèn)值）*/

　　counter-increment：section1;

　　}

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

　　3、顯示計數(shù)器

　　設(shè)置計數(shù)器并指定何時以及應(yīng)該增加多少后，我們需要顯示該計數(shù)器。

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

　　在我們的示例中，我們是對h3標(biāo)題進(jìn)行編號，因此我們將在標(biāo)題之前顯示計數(shù)器：

　　h3::before{

　　content：counter（section）;

　　}

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

　　h3::before{

　　/*在數(shù)字之后加一個點(diǎn)，后面加上空格*/

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

　　}

　　下面我來來看看示例：

　　html代碼：

　　<h3>css計數(shù)器的使用</h3>

　　<p>css計數(shù)器的使用css計數(shù)器的使用css計數(shù)器的使用css計數(shù)器的使用css計數(shù)器的使用</p>

　　<h3>css計數(shù)器的使用</h3>

　　<p>css計數(shù)器的使用css計數(shù)器的使用css計數(shù)器的使用css計數(shù)器的使用css計數(shù)器的使用</p>

　　css代碼：

　　body{

　　counter-reset:section;

　　}

　　h3:before{

　　counter-increment:section;

　　content:counter(section)".";

　　}

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