CSS中的li選中效果非常常見(jiàn)。通過(guò)CSS的樣式定義，當(dāng)用戶在頁(yè)面中點(diǎn)擊或者鼠標(biāo)懸停在列表項(xiàng)（li）上，就能夠觸發(fā)選中效果的顯示。下面我們就來(lái)看一看如何實(shí)現(xiàn)li選中的樣式效果。

li:hover {
background-color: #ddd;
color: #333;
}

實(shí)現(xiàn)選中效果需要用到:hover選擇器。通過(guò)該選擇器，我們可以在用戶鼠標(biāo)滑過(guò)時(shí)觸發(fā)選中效果的樣式定義。在上述代碼中，我們定義了當(dāng)鼠標(biāo)懸停在li元素上時(shí)的選中效果的樣式，包括背景色和字體顏色的改變。

除了:hover選擇器之外，CSS還提供了其他種類(lèi)的選中效果。比如，我們可以在li元素的class屬性中加入selected來(lái)表示該選項(xiàng)被選中。然后就可以利用CSS的.class選擇器，定義selected類(lèi)的樣式，如下所示：

li.selected {
background-color: #333;
color: #fff;
}

在實(shí)際應(yīng)用中，我們可以通過(guò)JS腳本在用戶點(diǎn)擊li元素時(shí)，利用classList API給該元素加上selected類(lèi)。然后，選中效果就能夠隨之顯示出來(lái)。