css設置某個選擇器出現次數的計數器並輸出
阿新 • • 發佈:2018-06-12
enc 每次 -o eight 繼承 次數 number 選擇 attr
1、counter-reset 屬性
用法:counter-reset 屬性設置某個選擇器出現次數的計數器的值。默認為 0。
說明:利用這個屬性,計數器可以設置或重置為任何值,可以是正值或負值。如果沒有提供 number,則默認為 0。
註釋:如果使用 “display: none”,則無法重置計數器。如果使用 “visibility: hidden”,則可以重置計數器。
2、counter-increment 屬性
用法:counter-increment 屬性設置某個選取器每次出現的計數器增量。默認增量是 1。
說明:利用這個屬性,計數器可以遞增(或遞減)某個值,這可以是正值或負值。如果沒有提供 number 值,則默認為 1。
註釋:如果使用了 “display: none”,則無法增加計數。如使用 “visibility: hidden”,則可增加計數。
3、content 屬性
content 屬性與 :before 及 :after 偽元素配合使用,來插入生成內容。
content屬性值:
值 | 說明 |
---|---|
none | 設置Content,如果指定成Nothing |
normal | 設置content,如果指定的話,正常,默認是"none"(該是nothing) |
counter | 設定計數器內容 |
attr(attribute) | 設置Content作為選擇器的屬性之一。 |
string | 設置Content到你指定的文本 |
open-quote | 設置Content是開口引號 |
close-quote | 設置Content是閉合引號 |
no-open-quote | 如果指定,移除內容的開始引號 |
no-close-quote | 如果指定,移除內容的閉合引號 |
url(url) | 設置某種媒體(圖像,聲音,視頻等內容) |
inherit | 指定的content屬性的值,應該從父元素繼承 |
#progressbar { counter-reset: step; } #progressbar li:before { content: counter(step); counter-increment: step; } #progressbar li:after { content: ‘‘; } #progressbar li:first-child:after { content: none; }
css設置某個選擇器出現次數的計數器並輸出