li標籤選擇器的特點
之前認爲標籤選擇器會對符合搜索條件的所有對應標籤進行選擇，直到最近做一個自動添加多層嵌套有序列表的項目，發現li:before {color:#f00; font-family:Times New Roman;} 的標籤只對第一層的li目錄起作用。依次類推，li li{ }只對第二層目錄起作用，li li li{ }只對第二層目錄起作用。
多層嵌套有序列表的編號
因此可以利用css的計數器counter-increment(手冊鏈接傳送門)實現。源代碼如下。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>列表結構</title>
<style type="text/css">
ol { list-style:none;} /*清除默認的序號*/
li:before {color:#f00; font-family:Times New Roman;} /*設計層級目錄序號的字體樣式*/
li{counter-increment:a 1;} /*設計遞增函數a，遞增起始值爲1 */
li:before{content:counter(a)". ";} /*把遞增值添加到列表項前面*/
li li{counter-increment:b 1;} /*設計遞增函數b，遞增起始值爲1 */
li li:before{content:counter(a)"."counter(b)". ";} /*把遞增值添加到二級列表項前面*/
li li li{counter-increment:c 1;} /*設計遞增函數c，遞增起始值爲1 */
li li li:before{content:counter(a)"."counter(b)"."counter(c)". ";} /*把遞增值添加到三級列表項前面*/
</style>
</head>
<body>
<ol>
<li>一級列表項目1
<ol>
<li>二級列表項目1</li>
<li>二級列表項目2
<ol>
<li>三級列表項目1</li>
<li>三級列表項目2</li>
</ol>
</li>
</ol>
</li>
<li>一級列表項目2</li>
</ol>
</body>
</html>
實現效果如下。
