亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

CSS多級(jí)數(shù)字序號(hào)的目錄列表(2.2.1. 2.2.2 列表序號(hào))

  發(fā)布時(shí)間：2017-08-14 10:37:18   作者：cuixiping   我要評(píng)論
這篇文章主要介紹了CSS多級(jí)數(shù)字序號(hào)的目錄列表(2.2.1. 2.2.2 列表序號(hào)),通過(guò)css代碼定義將數(shù)字多級(jí)列表展示出來(lái),,需要的朋友可以參考下

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

(圖一)

 

但默認(rèn)的<ol>列表，任何層次都是單個(gè)序號(hào)開(kāi)始。如下圖：

(圖二)

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

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

<ol>  
  <li>1. 列表項(xiàng)  
    <ol>  
      <li>1.1. 列表項(xiàng)  
        <ol>  
          <li>1.1.1 列表項(xiàng)</li>  
          <li>1.1.2 列表項(xiàng)</li>  
          <li>1.1.3 列表項(xiàng)</li>  
        </ol>  
      </li>  
    </ol>  
  </li>  
</ol>

 
如果既不想將序號(hào)硬寫(xiě)在html代碼里，也不想引入js，那么只能從HTML屬性和CSS兩個(gè)方面來(lái)突破了。

遺憾的是，HTML元素屬性并沒(méi)有提供類(lèi)似的接口。

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

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

HTML代碼如下：

<ol>  
  <li>列表項(xiàng)  
    <ol>  
      <li>列表項(xiàng)  
        <ol>  
          <li>列表項(xiàng)</li>  
          <li>列表項(xiàng)</li>  
          <li>列表項(xiàng)</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)". ";}


效果就是本篇開(kāi)頭的圖一。

可是這個(gè)CSS寫(xiě)的實(shí)在是丑陋，有幾級(jí)目錄，就得寫(xiě)幾層的CSS，顯然不應(yīng)該是這樣子的。

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

CSS代碼如下：

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

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

以上就是小編整理的全部?jī)?nèi)容啦，希望對(duì)大家有所幫助。

相關(guān)文章

最新評(píng)論