css li标签点击效果

CSS中的li标签是列表标签，在网页中十分常见，但是只有简单的样式会显得单调。所以，在网页中点击li标签时会发生一些点击效果，这是怎么实现的呢？

li:hover{
    background-color: #ddd;
    cursor: pointer;
}
li:active{
    background-color: #ccc;
}

通过CSS的:hover和:active伪类可以为li标签添加一些效果。

:hover伪类可以当鼠标指针移动到元素上时，元素会发生的样式变化。在上面的代码中，当鼠标指针移动到li元素上时，元素的背景色会变成灰色(#ddd)，这样用户就能够知道鼠标正指向哪一个元素。

:active伪类可以当元素被激活（一般是用户输入动作）时，元素会发生的样式变化。在上面的代码中，当用户按住li元素时，元素的背景色会变成深灰色(#ccc)，这样会给用户操作反馈。