CSS中content中的counter值分析

有些CSS的特性,不經常使用.我認為CSS counters 也是其中之一,主要有兩個原因:

1. 他們沒有很多的例子

2. 代碼可能稍微復雜一些.

CSS counters 允許動態的設置列表數字,類似一個排序列表.但是CSS counters是不一樣的. 特色就是使用一個偽元素結合一些具體的counterCSS ,追加/前置一個動態的"count"到一個指定的元素集合.

這里一個代碼例子

.container {
  counter-reset: issues 0;
}
.issue:before {
  counter-increment: issues 1;
  content: "Issue " counter(issues, decimal);
  display: block;
}

首先我們申明了計數的范圍,在.container元素之內做自增.我們定義一個 "issues" 名稱,其值從0開始.

其次,聲明一個塊狀的偽元素:berfore ,設置 content屬性的內容到前面.設置issues的自增量為1.

content屬性值,我們使用counter()函數和一個字符串,有點類似JAVASCRIPT中使用函數,或者是其他編程語言.counter函數有兩個參數: 之前申明的 "issues" 和 計數的方式,這樣就形成了一個排序列表. 這個例子中,我們使用的是十進制(decimal)的數值.

如果你仍舊感到困惑,可以看看下面的解析圖:

如果還不夠,這里有其他的學習資源.

a) CSS Counters: counter-increment and Friends (Impressive Webs)http://www.impressivewebs.com/css-counter-increment/

b) How To Benefit From CSS Generated Content And Counters (Smashing Magazine)http://www.smashingmagazine.com/2013/04/12/css-generated-content-counters/

c) CSS Counter Styles Level 3 (W3C spec) http://dev.w3.org/csswg/css-counter-styles-3/

最后一個鏈接,是CSS的規范草案,里面還有很多的特性,當然得在支持的瀏覽器下進行學習.

counter還有其他的設置效果,其方式都是一樣的,大家可以試試其他的顯示模式.

本文屬于吳統威的博客, 微信公眾號:bianchengderen,QQ群:186659233 的原創文章,轉載時請注明出處及相應鏈接:http://www.wutongwei.com/front/infor_showone.tweb?id=182 ,歡迎大家傳播與分享.