CSS如何實現(xiàn)多級數(shù)字序號的目錄列表-創(chuàng)新互聯(lián)

這篇文章主要為大家展示了“CSS如何實現(xiàn)多級數(shù)字序號的目錄列表”，內(nèi)容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學習一下“CSS如何實現(xiàn)多級數(shù)字序號的目錄列表”這篇文章吧。

創(chuàng)新互聯(lián)建站專注于企業(yè)全網(wǎng)營銷推廣、網(wǎng)站重做改版、共和網(wǎng)站定制設計、自適應品牌網(wǎng)站建設、H5建站、商城網(wǎng)站開發(fā)、集團公司官網(wǎng)建設、外貿(mào)網(wǎng)站制作、高端網(wǎng)站制作、響應式網(wǎng)頁設計等建站業(yè)務，價格優(yōu)惠性價比高，為共和等各大城市提供網(wǎng)站開發(fā)制作服務。

編寫文檔手冊的時候，我們經(jīng)常需要列表項前面的序號將上級各層的序號也附加在前面，如下圖：

(圖一)

 

但默認的<ol>列表，任何層次都是單個序號開始。如下圖：

(圖二)

要實現(xiàn)圖一效果，方法之一是直接將序號部分作為列表內(nèi)容的一部分，插入相應的HTML，可使用js批量插入序號。

生成的HTML結(jié)果類似這樣

<ol>  
  <li>1. 列表項  
    <ol>  
      <li>1.1. 列表項  
        <ol>  
          <li>1.1.1 列表項</li>  
          <li>1.1.2 列表項</li>  
          <li>1.1.3 列表項</li>  
        </ol>  
      </li>  
    </ol>  
  </li>  
</ol>

 
如果既不想將序號硬寫在html代碼里，也不想引入js，那么只能從HTML屬性和CSS兩個方面來突破了。

遺憾的是，HTML元素屬性并沒有提供類似的接口。

經(jīng)網(wǎng)友提示，知道了有個叫css counter 的概念，我孤陋寡聞了。

查詢有關(guān)文檔之后，CSS解決方案也就有了。

HTML代碼如下：

<ol>  
  <li>列表項  
    <ol>  
      <li>列表項  
        <ol>  
          <li>列表項</li>  
          <li>列表項</li>  
          <li>列表項</li>  
        </ol>  
      </li>  
    </ol>  
  </li>  
</ol>

CSS代碼如下：

ol {padding:0 0 0 20px;margin:0;list-style:none;}  
li:before {color:#f00; font-family:Times New Roman;}  
li{counter-increment:a 1;}  
li:before{content:counter(a)". ";}  
li li{counter-increment:b 1;}  
li li:before{content:counter(a)"."counter(b)". ";}  
li li li{counter-increment:c 1;}  
li li li:before{content:counter(a)"."counter(b)"."counter(c)". ";}

效果就是本篇開頭的圖一。

可是這個CSS寫的實在是丑陋，有幾級目錄，就得寫幾層的CSS，顯然不應該是這樣子的。

繼續(xù)閱讀了相關(guān)文檔，明確了counter-reset , counter(), counters() 之后，發(fā)現(xiàn)問題竟是異常的簡單。

CSS代碼如下：

ol {padding:0 0 0 20px;margin:0;list-style:none;counter-reset:a;}  
li:before {counter-increment:a;content:counters(a,".")". ";}

這樣，無論多少層的嵌套列表，都能正確顯示級聯(lián)序號了，效果如本篇開頭的圖一。
需要指出的是，:before, counter-increment 等相關(guān)CSS特性不支持古老的IE6/IE7，但是IE8及以上是支持的很好的。

以上是“CSS如何實現(xiàn)多級數(shù)字序號的目錄列表”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學習更多知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

網(wǎng)頁名稱：CSS如何實現(xiàn)多級數(shù)字序號的目錄列表-創(chuàng)新互聯(lián)
標題路徑：http://muchs.cn/article26/dodscg.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)頁設計公司、網(wǎng)站收錄、建站公司、App開發(fā)、靜態(tài)網(wǎng)站、小程序開發(fā)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)