您好,登錄后才能下訂單哦!
這篇文章將為大家詳細(xì)講解有關(guān)css中counter-increment屬性的使用方法,小編覺得挺實(shí)用的,因此分享給大家做個(gè)參考,希望大家閱讀完這篇文章后可以有所收獲。
counter-increment 屬性設(shè)置某個(gè)選取器每次出現(xiàn)的計(jì)數(shù)器增量。默認(rèn)增量是 1。
說(shuō)明
利用這個(gè)屬性,計(jì)數(shù)器可以遞增(或遞減)某個(gè)值,這可以是正值或負(fù)值。如果沒有提供 number 值,則默認(rèn)為 1。
注釋:如果使用了 "display: none",則無(wú)法增加計(jì)數(shù)。如使用 "visibility: hidden",則可增加計(jì)數(shù)。
值 | 描述 |
none | 默認(rèn)。選擇器無(wú)計(jì)數(shù)器增量。 |
id number | id 定義將增加計(jì)數(shù)的選擇器、id 或 class。 number 定義增量。number 可以是正數(shù)、零或者負(fù)數(shù)。 |
inherit | 規(guī)定應(yīng)該從父元素繼承 counter-increment 屬性的值。 |
實(shí)例
對(duì)部分和子部分進(jìn)行編號(hào)(比如 "Section 1"、"1.1"、"1.2")的方法:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <style type="text/css"> body {counter-reset:section;} h2 {counter-reset:subsection;} h2:before { counter-increment:section; content:"Section " counter(section) ". "; } h3:before { counter-increment:subsection; content:counter(section) "." counter(subsection) " "; } </style> </head> <body> <p><b>注釋:</b>如果已規(guī)定 !DOCTYPE,那么 Internet Explorer 8 (以及更高版本)支持 counter-increment 屬性。</p> <h2>HTML tutorials</h2> <h3>HTML Tutorial</h3> <h3>XHTML Tutorial</h3> <h3>CSS Tutorial</h3> <h2>Scripting tutorials</h2> <h3>JavaScript</h3> <h3>VBScript</h3> <h2>XML tutorials</h2> <h3>XML</h3> <h3>XSL</h3> </body> </html>
關(guān)于css中counter-increment屬性的使用方法就分享到這里了,希望以上內(nèi)容可以對(duì)大家有一定的幫助,可以學(xué)到更多知識(shí)。如果覺得文章不錯(cuò),可以把它分享出去讓更多的人看到。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。