建站
咨詢
售后
建站咨詢
新聞中心
創(chuàng)新互聯(lián)公司是一家專注于成都網(wǎng)站設(shè)計(jì)、成都網(wǎng)站建設(shè)、外貿(mào)網(wǎng)站建設(shè)與策劃設(shè)計(jì),天心網(wǎng)站建設(shè)哪家好?創(chuàng)新互聯(lián)公司做網(wǎng)站,專注于網(wǎng)站建設(shè)十多年,網(wǎng)設(shè)計(jì)領(lǐng)域的專業(yè)建站公司;建站業(yè)務(wù)涵蓋:天心等地區(qū)。天心做網(wǎng)站價(jià)格咨詢:028-86922220
- counter-reset：創(chuàng)建或者重置計(jì)數(shù)器；
- counter-increment：遞增變量；
- content：插入生成的內(nèi)容；
- counter() 或 counters()：將計(jì)數(shù)器的值添加到元素。
下面我們就來看一下 CSS 中的計(jì)數(shù)器是如何使用的。
初始化計(jì)數(shù)器
要使用計(jì)數(shù)器首先需要使用 counter-reset 屬性來創(chuàng)建一個(gè)計(jì)數(shù)器，這一過程便叫做初始化計(jì)數(shù)器。counter-reset 屬性的語法格式如下：
counter-reset：none | [
參數(shù)說明如下：
- none：阻止計(jì)數(shù)器復(fù)位；
-
：定義計(jì)數(shù)器的名稱； -
：定義計(jì)數(shù)器的起始值，默認(rèn)值為 0，可以為負(fù)值。
計(jì)數(shù)器自增
初始化計(jì)數(shù)器后，可以通過 counter-increment 屬性來指定計(jì)數(shù)器何時(shí)自增，語法格式如下：
counter-increment：none | [
參數(shù)說明如下：
- none：阻止計(jì)數(shù)器增加；
-
：定義要自增的計(jì)數(shù)器名稱； -
：定義計(jì)數(shù)器每次增加的數(shù)值，默認(rèn)值為 1，可以為負(fù)值。
顯示計(jì)數(shù)器
最后，就是如何顯示計(jì)數(shù)器了。要顯示計(jì)數(shù)器您可以使用 counter() 或 counters() 函數(shù)，這兩個(gè)函數(shù)的語法格式如下：
counter(name)
counters(name, string, list-style-type)
參數(shù)說明如下：
- name：計(jì)數(shù)器的名稱；
- string：當(dāng)計(jì)數(shù)器嵌套使用時(shí)，用來拼接的字符串；
- list-style-type：計(jì)數(shù)器顯示的風(fēng)格，可以是 CSS 中允許的任何《list-style-type 屬性》的值。
下面通過一個(gè)簡(jiǎn)單的示例來演示計(jì)數(shù)器的使用：
程序設(shè)計(jì)語言
HTML and CSS
JavaScript
PHP
Java
數(shù)據(jù)庫管理系統(tǒng)
MySQL
MariaDB
PostgreSQL
Oracle
運(yùn)行結(jié)果如下圖所示：
圖：計(jì)數(shù)器
注意：在使用 CSS 計(jì)數(shù)器之前，必須使用 counter-reset 創(chuàng)建計(jì)數(shù)器。
計(jì)數(shù)器嵌套
另外，計(jì)數(shù)器還可以嵌套使用，而且使用 counters() 函數(shù)可以在不同級(jí)別的嵌套計(jì)數(shù)器之間插入一個(gè)字符串，如下例所示：
- item
- item
- item
- item
- item
- item
- item
- item
- item
- item
- item
- item
- item
運(yùn)行結(jié)果如下圖所示：
圖：計(jì)數(shù)器嵌套
通過以上示例我們不難看出，使用 CSS 計(jì)數(shù)器可以在不借助其它編程語言（例如 JavaScript、PHP 等）的情況下實(shí)現(xiàn)簡(jiǎn)單的計(jì)數(shù)功能，當(dāng)需要為某些內(nèi)容添加序號(hào)時(shí)非常適用。
當(dāng)前名稱：CSS計(jì)數(shù)器精講
文章URL：http://m.5511xx.com/article/ccicjhs.html
