CSS計數器：給列表自動增長序號【2】

       

        如上圖的多層嵌套的列表本質上仍是單層列表的組合。再複雜的層級，都是由一個個父子關係的雙層層級組成的。只要每個最基本的父子關係層級不亂，組成的更復雜的結構就不會亂，層級關係不亂，樣式就能夠自動給每行文字添加正確的序號(ie6\7不支持相關樣式)

        須要在嵌套結構中添加自增序號的樣式有一點變化，原來用counter方法，如今要用counters方法，第一個參數是計數器名稱，第二個參數是間隔符號。其餘和《在CSS計數器：給列表自動增長序號【1】》中介紹的單層列表的自增序號的自動添加方法同樣。

代碼以下：

<style>
ul{counter-reset:num;padding-left:20px;}
li:before{content:counters(num,'.') '.';counter-increment:num;}
</style>

<ul>
    <li>王老大</li>
    <li>王老二
	<ul>
	    <li>王老二大兒子</li>
	    <li>王老二二兒子</li>
	    <li>王老二三兒子
	        <ul>
                    <li>王老二三兒子的大孫子</li>
                    <li>王老二三兒子的二孫子</li>
                    <li>王老二三兒子的三孫子</li>
		    </ul>
	    </li>
	</ul>
    </li>
    <li>王老三
	<ul>
	    <li>王老三大兒子</li>
	    <li>王老三二兒子</li>
	    <li>王老三三兒子
	        <ul>
		    <li>王老三三兒子的大孫子</li>
		    <li>王老三三兒子的二孫子</li>
		    <li>王老三三兒子的三孫子</li>
		    </ul>
	    </li>
	</ul>
    </li>
</ul>

        重複本文開始的話：不論多複雜的層級關係，都是由一個個穩定簡單的父子關係組成的。構建複雜層級的關鍵是做爲最基本的顆粒的每個父子關係不能錯。保證告終構的正確性，配合專有的樣式屬性，就能輕鬆實現複雜目路結構。

        不是必用ul、li來構建這種複雜層級目錄，可是用ul、li的結構能更明顯的提示咱們這種層級關係，讓咱們少犯錯。

        上述ul、li的代碼，咱們知道ul的子元素只能是li，咱們也能夠在li中繼續嵌套ul、li結構。可是，永遠不能讓ul和li以兄弟關係站在一塊兒。一個li元素要麼作爲ul的子元素，要麼做爲ul的父元素，但絕對不能是兄弟元素，ul和li絕對不能平等。這就是複雜目錄結構正確性的關鍵，ul和li的組合能很好的提示咱們這一點，可是假如咱們用其餘單體元素，如div配合class的方法就很容在構建複雜層級關係是忽略這種關係從而沒法獲得想要的層級顯示。保證告終構的正確性，再配合專有的樣式屬性counters、counter-increment、counter-reset這些，就能輕鬆實現複雜目路結構。

參考文章：http://www.zhangxinxu.com/wordpress/2014/08/css-counters-automatic-number-content/