CSS是一種用于定義網頁樣式的語言。其中，我們常常需要給列表添加交互效果，比如鼠標單擊時改變文本或背景顏色。本文將介紹如何使用CSS實現列表單擊變色效果。

/* CSS代碼 */
li:hover {
background-color: #f2f2f2;
}
li:active {
background-color: #008CBA;
color: white;
}

首先，我們需要使用:hover偽類來定義鼠標懸停時的樣式效果。當鼠標指針懸停在列表項上方時，我們可以將其背景顏色改為#f2f2f2。這種效果很常見，可以讓列表看起來更加有交互性。

接下來，我們需要使用:active偽類來定義鼠標單擊時的樣式效果。在一些情況下，單擊后文本或背景顏色會發生改變，這會提醒用戶他們所選擇的內容。對于列表，我們可以將其背景顏色改為#008CBA，同時將文本顏色改為白色，使得用戶能夠明顯地看到當前所選的列表項。

上述的CSS代碼可以應用于任意類型的列表，包括有序列表和無序列表。此外，我們還可以根據需要自定義樣式，增加動態效果等等，以實現更豐富的交互體驗。