DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS進階教程 >> counter-reset屬性和counter-increment屬性
counter-reset屬性和counter-increment屬性
編輯:CSS進階教程     

在前兩天發布的一篇文章《因為CSS3,動畫將一切皆有可能》,示例頁面當中使用了counter-reset屬性和counter-increment屬性來對<a>標簽進行自動排序輸出,這兩個屬性是css屬性當中的計數器,可以按照設定的方式自動計算出數值,在很多場景下具有很大的靈活性,具體的功能代碼如下:

.main {counter-reset:demo;}
.main a {counter-increment:demo;}
.main a:before {content:counter(demo, decimal);}
<a></a>
<a></a>
<a></a>

看到這裡,也許有不少人表示比較陌生,而且代碼也是非常的簡單。那麼今天就為大家簡單的介紹下這兩個屬性以及結合content屬性的一個簡單的例子。

counter-reset 屬性

用法:counter-reset 屬性設置某個選擇器出現次數的計數器的值。默認為 0。

說明:利用這個屬性,計數器可以設置或重置為任何值,可以是正值或負值。如果沒有提供 number,則默認為 0。

注釋:如果使用 “display: none”,則無法重置計數器。如果使用 “visibility: hidden”,則可以重置計數器。

counter-increment 屬性

用法:counter-increment 屬性設置某個選取器每次出現的計數器增量。默認增量是 1。

說明:利用這個屬性,計數器可以遞增(或遞減)某個值,這可以是正值或負值。如果沒有提供 number 值,則默認為 1。

注釋:如果使用了 “display: none”,則無法增加計數。如使用 “visibility: hidden”,則可增加計數。

我們了解後就來看看一個簡單示例:

1、CSS代碼
body {
	counter-reset:jiawin;
}
h1 {
	counter-reset:subjiawin;
}
h1:before {
	content:"類別 " counter(jiawin) ". ";
	counter-increment:jiawin;
}
h2:before {
	counter-increment:subjiawin;
	content:counter(jiawin) "." counter(subjiawin) " ";
}

/** 以下為頁面裝飾代碼 **/
body, h1, h2 {padding:0; margin:0;}
body {background-color:#fee0ef;}
.main {width:600px; margin:100px auto; border-radius:5px; height:auto; overflow:hidden; box-shadow:0px 1px 5px rgba(0,0,0,0.5);}
.main h1 {background:#936; color:#FFF; padding:5px; border-top:1px solid #df94b9; border-bottom:1px solid #df94b9;}
.main h2 {background-color:#c47da0; color:#FFF; padding:5px; border-bottom:1px solid #cd8fae;}
2、HTML代碼
<h1></h1>
<h2></h2>
<h2></h2>
<h1></h1>
<h2></h2>
<h2></h2>
<h2></h2>
<h1></h1>
<h2></h2>
<h2></h2>

在這個示例中,我們不單單運用了counter-reset屬性和counter-increment屬性而且還配合了content屬性的運用,這三個屬性配合起來使用也是挺不錯的,在布局當中有很大的靈活性。關於content屬性,相信大家也是比較熟悉的,大概的用法如下:

content:string|url|counter(name)|counter(name, list-style-type)|counters(name, string)|counters(name, string, list-style-type)|attr(X)|open-quote|close-quote|no-open-quote|no-close-quote;

大家是否還記得之前的一篇文章《CSS偽元素before、after妙用:制作時尚焦點圖相框》,在這篇文章中也就是運用了content屬性,合理的運用好這些屬性之間的差異和互補關系,將會給我們帶來更多的方便,你認為呢﹖歡迎和你一起來探討這個神奇的css國度……

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved