在前端開發中，CSS是一項非常重要的技能。CSS可以幫助我們美化網頁，為用戶帶來更好的體驗。其中，li CSS效果也是非常實用的。下面我們來討論一下。

/* 讓li元素懸浮 */
li:hover {
border: 1px solid black;
background-color: lightblue;
color: white;
}
/* 讓li元素帶有點擊效果 */
li:active {
border: 2px solid black;
background-color: green;
color: yellow;
}
/* 讓li元素有選中效果 */
li:selected {
border: 2px solid black;
background-color: pink;
color: purple;
}

首先，我們可以使用:hover偽類來讓鼠標懸浮在li元素上時，產生一些視覺上的效果，比如添加了邊框、背景顏色和字體顏色。這可以讓用戶更清晰地認識到當前光標所處的區域。

其次，我們可以使用:active偽類來為li元素添加點擊效果。當用戶點擊li元素時，它會改變邊框、背景顏色和字體顏色。這可以讓用戶在使用網頁時更清晰地感知到他們的行為。

最后，我們可以使用:selected偽類來為li元素添加選中效果。這個效果與:active偽類類似，但他們有一些不同之處。當用戶選中一個li元素時，它不會立即改變效果，需要經過一些時間才能看到改變。這可以讓用戶更清晰地感知到他們當前所選的內容。