[分享]css中实现li点击变色

在CSS中实现LI元素的点击变色效果是一项非常常见，而且也非常有用的任务。在许多网站中，当用户点击页面上的某些链接或按钮时，它们的背景色或文本颜色经常会发生变化，这通常用于标识一个选择或指示一个按钮是...

在CSS中实现LI元素的点击变色效果是一项非常常见，而且也非常有用的任务。在许多网站中，当用户点击页面上的某些链接或按钮时，它们的背景色或文本颜色经常会发生变化，这通常用于标识一个选择或指示一个按钮是已经按下过了。
要实现这个效果，你需要在CSS中使用“:hover”伪类，通过它来定义元素在被鼠标悬停时应该体现的样式。然后，你可以把这个伪类与“:active”伪类组合使用，在元素被点击时实现变色效果。
以下是一个例子：

ul li {
      color: #000;
      background-color: #fff;
      border: 1px solid #000;
      padding: 10px;
}

ul li:hover {
      background-color: #ccc;
}

ul li:active {
      background-color: #f00;
} 

在这段代码中，我们使用了“ul li”选择器来选择一个无序列表中的所有LI元素，并将它们的背景色设置为白色、颜色设置为黑色，还添加了一些其他的样式。
然后，我们为“:hover”伪类设置了一个“background-color”（背景色）属性，这样当鼠标悬停在LI元素上时，它们的背景会变成深灰色。
最后，我们使用了“:active”伪类，为当用户点击一个LI元素时要应用的样式设置了一个红色背景色。这里需要注意的是，一旦用户松开鼠标，该元素将再次回到“:hover”变化的状态。
总的来说，这个例子给我们展示了如何在CSS中使用伪类来实现LI元素的点击变色效果，而这个技巧同样适用于其他类型的元素、链接和按钮。