css3点击li变色

CSS3是当前最先进的CSS版本，其中有很多新的特性可以让我们的网页更加丰富和美观。今天我们来学习CSS3的一个特性——点击li变色。

!--这是HTML代码-->
    ul>
    li>
    列表项1/li>
    li>
    列表项2/li>
    li>
    列表项3/li>
    li>
    列表项4/li>
    /ul>
    

我们可以使用CSS3中的:focus伪类，当我们点击列表项的时候，它会添加一个:focus状态，并且我们可以通过给:focus状态添加样式来实现点击变色的效果。

!--这是CSS代码-->
li:focus {
    background-color: #f5f5f5;
    color: #333;
}
    

上面的代码中，我们为列表项添加了一个:focus状态，然后指定了背景色和字体颜色，当我们点击列表项的时候，它就会变成我们设置的颜色。

这就是CSS3点击li变色的方法，希望对你有所帮助。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！