在Web開(kāi)發(fā)中，我們經(jīng)常需要在頁(yè)面上展示一些列表信息。CSS中提供了很多樣式可以讓列表看起來(lái)更加美觀和易讀。而其中，無(wú)限級(jí)別的列表樣式可以幫助我們構(gòu)建出更加復(fù)雜的導(dǎo)航和菜單。

/* 無(wú)限級(jí)別的列表樣式 */
ul {
list-style: none;
margin: 0;
padding: 0;
}
li {
margin: 0;
padding: 0;
}
li > ul {
display: none;
}
li.open > ul {
display: block;
}
li:before {
content: "\25ba\0020";
}
li.open:before {
transform: rotate(90deg);
}

這里我們使用了偽元素:before來(lái)添加一個(gè)箭頭圖標(biāo)，在li元素前面進(jìn)行顯示。當(dāng)li元素下面有子列表時(shí)，我們隱藏子列表元素，只有當(dāng)li元素被激活狀態(tài)open時(shí)，才顯示子列表。當(dāng)然我們需要自己根據(jù)實(shí)際需求編寫(xiě)一些JavaScript代碼來(lái)控制open狀態(tài)。

通過(guò)上面的代碼，我們可以構(gòu)建出任意級(jí)別的嵌套列表，并且列表的樣式可以自己定制和擴(kuò)展。這樣的無(wú)限級(jí)別列表樣式，可以應(yīng)用于導(dǎo)航、菜單、目錄等各種類(lèi)型的列表展示。同時(shí)，我們也可以對(duì)樣式進(jìn)行修改，例如更改箭頭圖標(biāo)的方向或者顏色等等。