CSS計數(shù)器counter()的用法簡介
我要評論使用counter()在列表中自動添加序號
另外一個在CSS 2.1在就已經支持的功能是counter()，使用它，你能方便的在頁面標題，區(qū)塊和其它各種連續(xù)出現(xiàn)的頁面內容上添加序號。有了它，你就不必限制于只能使用<ol>來實現(xiàn)這個效果，你可以更靈活的在頁面上使用自定義數(shù)字序列。
counter-reset定義和用法
counter-reset 屬性設置某個選擇器出現(xiàn)次數(shù)的計數(shù)器的值。默認為 0。
利用這個屬性，計數(shù)器可以設置或重置為任何值，可以是正值或負值。如果沒有提供 number，則默認為 0。
注釋：如果使用 "display: none"，則無法重置計數(shù)器。如果使用 "visibility: hidden"，則可以重置計數(shù)器。
注釋：如果已規(guī)定 !DOCTYPE，那么 Internet Explorer 8 （以及更高版本）支持 counter-reset 屬性。
counter-reset可能的值
none：默認。不能對選擇器的計數(shù)器進行重置。
id number：id 定義重置計數(shù)器的選擇器、id 或 class。number 可設置此選擇器出現(xiàn)次數(shù)的計數(shù)器的值?？梢允钦龜?shù)、零或負數(shù)。
inherit：規(guī)定應該從父元素繼承 counter-reset：屬性的值。
關鍵就是它真的很簡單：在:before偽類里的content屬性加入counter()：
- body {
- countercounter-reset: heading;
- }
- h4:before {
- countercounter-increment: heading;
- content: "Heading #" counter(heading) ".";
- }
示例：
CSS代碼：
- .counter { countercounter-reset: wangxiaoer 2; font-size: 24px; font-family: arial black; color: #cd0000; }
- .counter:before,
- .counter:after { display: block; content: counter(wangxiaoer, lower-roman); countercounter-increment: wangxiaoer; }
HTML代碼：
- <strong>我叫王小二，萬萬沒想到，下面要出現(xiàn)的數(shù)字是：</strong>
- <p class="counter"></p>
- <strong>直接穿越到羅馬，這萬虐的劇情讓我這個客串演員實在承受不住啊！</strong>
效果：
相關文章
通過CSS3的object-fit來調整圖片適配尺寸的技巧簡介
這篇文章主要介紹了通過CSS3的object-fit來調整圖片適配尺寸的技巧,包括用object-fit來居中并裁剪圖片的方法,需要的朋友可以參考下2016-02-27- 這篇文章主要介紹了CSS中的偽元素,是CSS入門學習中的基礎知識,需要的朋友可以參考下2015-08-01
- 這篇文章主要介紹了CSS中的各種選擇符,是CSS入門學習中的基礎知識,需要的朋友可以參考下2015-07-17
- 這篇文章主要介紹了Markdown.css樣式,用來實現(xiàn)顯示強大的Markdown樣式的文本,需要的朋友可以參考下2015-07-16
- CSS里一直有一個讓我們頭疼的問題，就是創(chuàng)建布局很麻煩。當然，有很多方式，有很多技術都可以創(chuàng)建各種布局，但我們總覺得CSS里應該提供一些新屬性，讓我們能更好的管理布局2014-05-03
定義css設備類型-Media Queries圖表簡介及使用方法
CSS3完美地解決了讓同一個網(wǎng)站同時適應完全不同尺寸的屏幕這些問題;css3提出的MediaQueries解決了為網(wǎng)站設計不同的CSS樣式文件，如打印樣式表文件，手機樣式文件，電腦樣式2013-01-21css3背景圖片透明疊加屬性cross-fade簡介及用法實例
據(jù)說iOS6系統(tǒng)(iPhone5)增加了兩個CSS3屬性，一個是CSS3 filters – CSS3濾鏡另外一個是CSS3 Cross-fade – CSS3交叉淡入淡出,接下來為您介紹cross-fade屬性，感興趣的朋友2013-01-08- 本文主要介紹了通用的css hack2012-07-11
網(wǎng)頁設計中的CSS Sprites技術介紹及其優(yōu)化方法
CSS Sprites 技術對于廣大的前端工程師來說應該是一點也不陌生。這個被國內開發(fā)者昵稱為CSS精靈 CSS雪碧的家伙到底解決了什么問題，我們又怎樣合理使用這個技術呢?下面讓我2012-05-31- 國外人士非常重視網(wǎng)站的易用性，相當一部分外國站點已經使用em作為字體單位.2009-12-27