css中点击li后变色且不消失

在网页开发中，常常需要给列表加入交互效果，其中一个比较常见的需求是点击列表项后改变颜色，并保持不变。这种效果可以用 CSS 来实现。

li:focus {
    background-color: #f00;
    outline: none;
}

在上面的 CSS 中，我们使用了 :focus 选择器来匹配列表项被聚焦时的样式。当用户点击列表项时，它就会变成聚焦状态。这时我们给它设置了一个背景色，就可以让它看起来被选中了。

还有一个小细节需要注意，就是点击列表项后会出现外边框（默认有虚线），这会让我们的效果看起来不太好看。为了去掉这个外边框，我们给它的 outline 属性设置成 none。

值得一提的是，这种效果只能在支持聚焦状态的设备中生效，比如电脑的浏览器。在手机上，用户点击列表项时是没有聚焦状态的，所以无法实现这种效果。不过不用担心，其它的效果还是可以用 CSS 来实现的。