序號的目錄列表

這次帶給大家一個有序號的目錄列表，實現有序號的目錄列表注意事項有哪些，下面就是實戰案例，一起來看一下。

寫文件手冊的時候，我們常常需要列表項目前面的序號將上級各層的序號也附加在前面，如下圖：

(圖一)

但預設的

列表，任何層次都是單一序號開始。如下圖：

(圖二)



要實現圖一效果，方法之一是直接將序號部分當作清單內容的一部分，插入對應的HTML，可使用js批次插入序號。

產生的HTML結果類似這樣

<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元素屬性並沒有提供類似的介面。

經網友提示，知道了有個叫css counter 的概念，我孤陋寡聞了。

查詢有關文件之後，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，顯然不應該是這樣子的。

繼續閱讀了相關文檔，明確了counter-reset , counter(), counters() 之後，發現問題竟是異常的簡單。

CSS程式碼如下：

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

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

相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

推薦閱讀：

href和src、link和@import有什麼區別


css的絕對定位怎麼相容所有的解析度


CSS3的屬性transition、animation、transform


#

以上是序號的目錄列表的詳細內容。更多資訊請關注PHP中文網其他相關文章！