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