CSS是一種用于網(wǎng)頁樣式設(shè)計的編程語言，它被廣泛地應用于網(wǎng)頁設(shè)計和開發(fā)中。其中一個重要的應用之一就是實現(xiàn)伸縮列表的效果。

伸縮列表是指一種可以展開或者收起的列表，通過點擊列表項，可以展現(xiàn)或者隱藏更多的內(nèi)容。這種列表在網(wǎng)站設(shè)計中有很多應用，比如產(chǎn)品展示、頁面內(nèi)容的分類等。

/*
 * 設(shè)置列表項的基礎(chǔ)樣式
 */
ul li {
list-style: none; /*去除列表標記*/
padding: 10px; /*設(shè)置內(nèi)邊距*/
border-bottom: 1px solid #ccc; /*設(shè)置邊框*/
}
/*
 * 展開狀態(tài)下的樣式
 */
ul li.active {
background-color: #f8f8f8; /*設(shè)置背景色*/
}
/*
 * 隱藏狀態(tài)下的樣式
 */
ul li .content {
display: none; /*隱藏內(nèi)容*/
}

通過CSS實現(xiàn)伸縮列表的效果主要有兩種方式：使用JavaScript或者使用CSS3的偽類選擇器。

使用JavaScript實現(xiàn)伸縮列表的效果，需要用到JavaScript代碼來實現(xiàn)點擊事件的監(jiān)聽和列表狀態(tài)的改變，但是這種方式可能會增加頁面的加載時間和復雜度。

如果使用CSS3的偽類選擇器，我們只需要設(shè)置好相關(guān)的樣式即可，但是這種方式可能不兼容舊版本的瀏覽器。

/*
 * 使用:checked偽類選擇器實現(xiàn)伸縮列表
 */
ul li .content {
display: none;
}
ul li label {
cursor: pointer; /*設(shè)置鼠標樣式*/
}
ul li input:checked ~ .content {
display: block; /*選中列表項時顯示內(nèi)容*/
}

在這里，我們使用了CSS3的:checked偽類選擇器，它可以選擇被選中的元素，前提是我們需要在列表項中設(shè)置一個元素，并且在標簽中設(shè)置for屬性來綁定這個元素。

總之，無論使用哪種方式，CSS都可以很好地實現(xiàn)伸縮列表的效果，幫助我們更好地展示網(wǎng)頁內(nèi)容。