欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

CSS黑魔法之計(jì)數(shù)器counter的使用技巧

WEB駭客   發(fā)布時(shí)間：2016-02-27 11:53:45   作者：David Walsh   我要評(píng)論
這篇文章主要介紹了CSS3黑魔法之計(jì)數(shù)器counter的使用技巧,文中甚至用它來(lái)實(shí)現(xiàn)了一個(gè)小型的加法計(jì)算器,這對(duì)于CSS來(lái)說(shuō)還是十分exciting的,需要的朋友可以參考下

計(jì)數(shù)器(counter)，“老一輩”程序員估計(jì)對(duì)這個(gè)東西印象深刻，早期的網(wǎng)站頁(yè)面上經(jīng)常會(huì)有這個(gè)東西，如今這種特征都變成了笑話(huà)。CSS里自己實(shí)現(xiàn)了一種計(jì)數(shù)器，很簡(jiǎn)單，很直接。使用CSS計(jì)數(shù)器，你可以實(shí)現(xiàn)簡(jiǎn)單的純CSS的計(jì)數(shù)功能，并能將其顯示到頁(yè)面上。下面我們簡(jiǎn)單的看一下CSS計(jì)數(shù)器是如何使用的！

初始化CSS計(jì)數(shù)器

為了好理解，我們使用<OL> 和 <LI> 元素來(lái)做演示。首先我們要重置計(jì)數(shù)器，讓它歸零，并給它指定一個(gè)名稱(chēng)：

CSS Code復(fù)制內(nèi)容到剪貼板
  1. ol.slides {   
  2.  countercounter-reset: slideNum;   
  3. }  

這個(gè)計(jì)數(shù)器叫slideNum，下面的例子都都要使用它。

CSS計(jì)數(shù)器的自增

為了是計(jì)數(shù)器能夠自增，我們需要使用counter-increment，并把計(jì)數(shù)器的名稱(chēng)跟到后面：

CSS Code復(fù)制內(nèi)容到剪貼板
  1. ol.slides > li {   
  2.  countercounter-increment: slideNum;   
  3. }  

這樣，在CSS選擇器下，每遇到一個(gè)符合條件li元素，counter-increment就會(huì)被調(diào)用一次，計(jì)數(shù)就是增加1。需要注意的是，這里的CSS選擇器里使用了>符號(hào)，這樣是為了濾掉有可能多重嵌套的li元素。否者你的計(jì)數(shù)值就會(huì)不是你想要的。

使用計(jì)數(shù)值

如果只計(jì)數(shù)而無(wú)法顯示，那這個(gè)計(jì)數(shù)器也沒(méi)多大用處，所以就有了counter()命令來(lái)輸出計(jì)數(shù)器里的值，可以用在content屬性里：

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

有趣的是，這個(gè)counter()命令還可以接受第二個(gè)參數(shù)，當(dāng)作同時(shí)計(jì)算多個(gè)元素時(shí)數(shù)據(jù)的分隔符：

假設(shè)有這樣的HTML:

XML/HTML Code復(fù)制內(nèi)容到剪貼板
  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>  

我們這樣來(lái)寫(xiě)：

CSS Code復(fù)制內(nèi)容到剪貼板
  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. }  

會(huì)輸出下面的結(jié)果

XML/HTML Code復(fù)制內(nèi)容到剪貼板
  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>  

你可以發(fā)現(xiàn)，當(dāng)需要顯示這種聯(lián)級(jí)嵌套序號(hào)時(shí)，這種技術(shù)是非常的有用的。很像微軟WORD里面文檔的多重序號(hào)。

在 counter-reset 屬性中，定義了一個(gè)隨機(jī) ID，其默認(rèn)值是0。你可以在 counter-increment 屬性中定義另外一個(gè)數(shù)字，作為計(jì)數(shù)的步長(zhǎng)。

例如：counter-increment: i 2 將值顯示偶數(shù)。

大多時(shí)候，CSS計(jì)數(shù)器都是配合:after和:before偽元素使用，我曾看到過(guò)有人在幻燈片、視頻頁(yè)面和文檔里用過(guò)CSS計(jì)數(shù)器。相信你會(huì)找到其它可以使用它的地方。

CSS 計(jì)數(shù)器進(jìn)階
利用 CSS 計(jì)數(shù)器，能統(tǒng)計(jì)被用戶(hù)選擇的復(fù)選框個(gè)數(shù)：

CSS Code復(fù)制內(nèi)容到剪貼板
  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. }   

在這個(gè)示例中，我們會(huì)增加 input:checked 的數(shù)量并打印出來(lái)。
2016227115748797.gif (617×149)

你還能創(chuàng)建一個(gè)小型計(jì)算器：

CSS Code復(fù)制內(nèi)容到剪貼板
  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.   
  16. #one:checked { countercounter-increment: sum 1; }   
  17. #two:checked { countercounter-increment: sum 2; }   
  18. #three:checked { countercounter-increment: sum 3; }   
  19. #four:checked { countercounter-increment: sum 4; }   
  20. #five:checked { countercounter-increment: sum 5; }   
  21. #one-hundred:checked { countercounter-increment: sum 100; }   
  22.   
  23. .sum::after {   
  24.   content: '= ' counter(sum);   
  25. }   

2016227115849334.gif (384×149)

相關(guān)文章

最新評(píng)論