欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

CSS實現(xiàn)多層嵌套列表自動編號的示例代碼

  發(fā)布時間：2023-02-24 16:26:32   作者：似水の流年_2019   我要評論
本文主要介紹了CSS實現(xiàn)多層嵌套列表自動編號的示例代碼，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧

li標簽選擇器的特點
之前認為標簽選擇器會對符合搜索條件的所有對應標簽進行選擇，直到最近做一個自動添加多層嵌套有序列表的項目，發(fā)現(xiàn)li:before {color:#f00; font-family:Times New Roman;} 的標簽只對第一層的li目錄起作用。依次類推，li li{ }只對第二層目錄起作用，li li li{ }只對第二層目錄起作用。

多層嵌套有序列表的編號

因此可以利用css的計數(shù)器counter-increment(手冊鏈接傳送門)實現(xiàn)。源代碼如下。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>列表結(jié)構(gòu)</title>
<style type="text/css">
ol { list-style:none;} /*清除默認的序號*/
li:before {color:#f00; font-family:Times New Roman;} /*設(shè)計層級目錄序號的字體樣式*/
li{counter-increment:a 1;}  /*設(shè)計遞增函數(shù)a，遞增起始值為1 */
li:before{content:counter(a)". ";}   /*把遞增值添加到列表項前面*/
li li{counter-increment:b 1;} /*設(shè)計遞增函數(shù)b，遞增起始值為1 */
li li:before{content:counter(a)"."counter(b)". ";}  /*把遞增值添加到二級列表項前面*/
li li li{counter-increment:c 1;}  /*設(shè)計遞增函數(shù)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>

實現(xiàn)效果如下。

 到此這篇關(guān)于CSS實現(xiàn)多層嵌套列表自動編號的示例代碼的文章就介紹到這了,更多相關(guān)CSS多層嵌套列表自動編號內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！

相關(guān)文章

  • 純CSS實現(xiàn)markdown自動編號的示例代碼

    這篇文章主要介紹了純CSS實現(xiàn)markdown自動編號的示例代碼，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一
    2020-09-22

最新評論