CSS點擊li變色的實現(xiàn)方法：

li:hover {
background-color: #ccc;
}
li.active {
background-color: #f00;
}

使用:hover偽類可以實現(xiàn)當(dāng)鼠標(biāo)懸浮在li元素上時改變背景顏色。而當(dāng)要實現(xiàn)點擊li后背景顏色改變的效果，就需要通過JavaScript來添加或移除指定的class名。

var lis = document.getElementsByTagName('li');
for(var i = 0; i< lis.length; i++) {
lis[i].addEventListener('click', function() {
var current = document.getElementsByClassName('active');
if(current.length >0) {
current[0].classList.remove('active');
}
this.classList.add('active');
});
}

通過為li元素添加事件監(jiān)聽器，當(dāng)點擊li元素時會移除之前的active類名，并為當(dāng)前點擊的li元素添加active類名，從而實現(xiàn)點擊li變色的效果。