建站
咨詢
售后
建站咨詢
新聞中心
這篇文章給大家介紹怎么在CSS中使用counter()還是，內(nèi)容非常詳細(xì)，感興趣的小伙伴們可以參考借鑒，希望對大家能有所幫助。
成都創(chuàng)新互聯(lián)公司是一家專業(yè)提供太原企業(yè)網(wǎng)站建設(shè),專注與網(wǎng)站制作、成都做網(wǎng)站、HTML5建站、小程序制作等業(yè)務(wù)。10年已為太原眾多企業(yè)、政府機構(gòu)等服務(wù)。創(chuàng)新互聯(lián)專業(yè)網(wǎng)站建設(shè)公司優(yōu)惠進行中。
使用counter()在列表中自動添加序號
另外一個在CSS 2.1在就已經(jīng)支持的功能是counter()，使用它，你能方便的在頁面標(biāo)題，區(qū)塊和其它各種連續(xù)出現(xiàn)的頁面內(nèi)容上添加序號。有了它，你就不必限制于只能使用
- 來實現(xiàn)這個效果，你可以更靈活的在頁面上使用自定義數(shù)字序列。
body {
countercounter-reset: heading;
}
h4:before {
countercounter-increment: heading;
content: "Heading #" counter(heading) ".";
}
.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; }
我叫王小二，萬萬沒想到，下面要出現(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ù)器進行重置。
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()：
CSS Code復(fù)制內(nèi)容到剪貼板
示例：
CSS代碼：
CSS Code復(fù)制內(nèi)容到剪貼板
HTML代碼：
XML/HTML Code復(fù)制內(nèi)容到剪貼板
關(guān)于怎么在CSS中使用counter()還是就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，可以學(xué)到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。
當(dāng)前文章：怎么在CSS中使用counter()還是
分享網(wǎng)址：http://www.dlmjj.cn/article/jdhgpg.html
