DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS詳解 >> CSS黑魔法之計數器counter的使用技巧
CSS黑魔法之計數器counter的使用技巧
編輯:CSS詳解     
這篇文章主要介紹了CSS3黑魔法之計數器counter的使用技巧,文中甚至用它來實現了一個小型的加法計算器,這對於CSS來說還是十分exciting的,需要的朋友可以參考下

計數器(counter),“老一輩”程序員估計對這個東西印象深刻,早期的網站頁面上經常會有這個東西,如今這種特征都變成了笑話。CSS裡自己實現了一種計數器,很簡單,很直接。使用CSS計數器,你可以實現簡單的純CSS的計數功能,並能將其顯示到頁面上。下面我們簡單的看一下CSS計數器是如何使用的!

初始化CSS計數器

為了好理解,我們使用<OL> 和 <LI> 元素來做演示。首先我們要重置計數器,讓它歸零,並給它指定一個名稱:

CSS Code復制內容到剪貼板
  1. ol.slides {
  2. countercounter-reset: slideNum;
  3. }

這個計數器叫slideNum,下面的例子都都要使用它。

CSS計數器的自增

為了是計數器能夠自增,我們需要使用counter-increment,並把計數器的名稱跟到後面:

CSS Code復制內容到剪貼板
  1. ol.slides > li {
  2. countercounter-increment: slideNum;
  3. }

這樣,在CSS選擇器下,每遇到一個符合條件li元素,counter-increment就會被調用一次,計數就是增加1。需要注意的是,這裡的CSS選擇器裡使用了>符號,這樣是為了濾掉有可能多重嵌套的li元素。否者你的計數值就會不是你想要的。

使用計數值

如果只計數而無法顯示,那這個計數器也沒多大用處,所以就有了counter()命令來輸出計數器裡的值,可以用在content屬性裡:

CSS Code復制內容到剪貼板
  1. ol.slides li:after {
  2. content: "[" counter(slideNum) "]";
  3. }

有趣的是,這個counter()命令還可以接受第二個參數,當作同時計算多個元素時數據的分隔符:

假設有這樣的Html:

XML/Html Code復制內容到剪貼板
  1. <ol class="toc">
  2. <li>Intro</li>
  3. <li>Topic
  4. <ol>
  5. <li>Subtopic</li>
  6. <li>Subtopic</li>
  7. <li>Subtopic</li>
  8. </ol>
  9. </li>
  10. <li>Topic
  11. <ol>
  12. <li>Subtopic</li>
  13. <li>Subtopic</li>
  14. <li>Subtopic</li>
  15. </ol>
  16. </li>
  17. <li>Closing</li>
  18. </ol>

我們這樣來寫:

CSS Code復制內容到剪貼板
  1. ol.toc, ol.toc ol {
  2. countercounter-reset: toc;
  3. }
  4. ol li {
  5. countercounter-increment: toc;
  6. }
  7. .toc li:before {
  8. content: "(Item " counters(toc, ".") ")";
  9. }

會輸出下面的結果

XML/Html Code復制內容到剪貼板
  1. <ol class="toc">
  2. <li>(Item 1)Intro</li>
  3. <li>(Item 2)Topic
  4. <ol>
  5. <li>(Item 2.1)Subtopic</li>
  6. <li>(Item 2.2)Subtopic</li>
  7. <li>(Item 2.3)Subtopic</li>
  8. </ol>
  9. </li>
  10. <li>(Item 3)Topic
  11. <ol>
  12. <li>(Item 3.1)Subtopic</li>
  13. <li>(Item 3.2)Subtopic</li>
  14. <li>(Item 3.3)Subtopic</li>
  15. </ol>
  16. </li>
  17. <li>(Item 4)Closing</li>
  18. </ol>

你可以發現,當需要顯示這種聯級嵌套序號時,這種技術是非常的有用的。很像微軟Word裡面文檔的多重序號。

在 counter-reset 屬性中,定義了一個隨機 ID,其默認值是0。你可以在 counter-increment 屬性中定義另外一個數字,作為計數的步長。

例如:counter-increment: i 2 將值顯示偶數。

大多時候,CSS計數器都是配合:after和:before偽元素使用,我曾看到過有人在幻燈片、視頻頁面和文檔裡用過CSS計數器。相信你會找到其它可以使用它的地方。

CSS 計數器進階
利用 CSS 計數器,能統計被用戶選擇的復選框個數:

CSS Code復制內容到剪貼板
  1. <div class="languages">
  2. <input id="c" type="checkbox"><label for="c">C</label>
  3. <input id="C++" type="checkbox"><label for="C++">C++</label>
  4. <input id="C#" type="checkbox"><label for="C#">C#</label>
  5. <input id="Java" type="checkbox"><label for="Java">Java</label>
  6. <input id="JavaScript" type="checkbox"><label for="JavaScript">JavaScript</label>
  7. <input id="PHP" type="checkbox"><label for="PHP">PHP</label>
  8. <input id="Python" type="checkbox"><label for="Python">Python</label>
  9. <input id="Ruby" type="checkbox"><label for="Ruby">Ruby</label>
  10. </div>
  11. <p class="total">
  12. Total selected:
  13. </p>
  14. .languages {
  15. countercounter-reset: characters;
  16. }
  17. input:checked {
  18. countercounter-increment: characters;
  19. }
  20. .total:after {
  21. content: counter(characters);
  22. }

在這個示例中,我們會增加 input:checked 的數量並打印出來。
2016227115748797.gif (617×149)

你還能創建一個小型計算器:

CSS Code復制內容到剪貼板
  1. <div class="numbers">
  2. <input id="one" type="checkbox"><label for="one">1</label>
  3. <input id="two" type="checkbox"><label for="two">2</label>
  4. <input id="three" type="checkbox"><label for="three">3</label>
  5. <input id="four" type="checkbox"><label for="four">4</label>
  6. <input id="five" type="checkbox"><label for="five">5</label>
  7. <input id="one-hundred" type="checkbox"><label for="one-hundred">100</label>
  8. </div>
  9. <p class="sum">
  10. Sum
  11. </p>
  12. .numbers {
  13. countercounter-reset: sum;
  14. }
  15. #one:checked { countercounter-increment: sum 1; }
  16. #two:checked { countercounter-increment: sum 2; }
  17. #three:checked { countercounter-increment: sum 3; }
  18. #four:checked { countercounter-increment: sum 4; }
  19. #five:checked { countercounter-increment: sum 5; }
  20. #one-hundred:checked { countercounter-increment: sum 100; }
  21. .sum::after {
  22. content: '= ' counter(sum);
  23. }

2016227115849334.gif (384×149)

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