css li点击样式

CSS中的li点击样式常常用于导航栏等列表中，使得用户可以知道自己所处的位置。下面是一个示例：

ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

li {
  display: inline-block;
  padding: 10px;
  border: 1px solid #000;
}

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

li.active {
  background-color: #000;
  color: #fff;
}

上面的代码中，我们首先将ul去掉了默认的列表样式，并将padding和margin都设为了0。然后对li元素设置了display属性为inline-block，这是为了让每个li元素都在一行上显示。然后我们为li元素设置了一些padding和边框，这样看起来更加协调。接着我们用:hover伪类选择器为li元素设置了鼠标悬停时的背景色，让用户可以直观地了解自己选择的是哪个元素。

但是，如果我们想让用户更加明确地知道自己选择的是哪个元素，我们就需要用到active类了。在HTML中，我们只需要将想要设置为激活元素的li元素添加一个active类即可。在CSS中，我们为这个active类设置了背景色和文本颜色，让用户可以更加清晰地知道自己所处的位置。

总之，CSS中的li点击样式可以在列表或导航栏中使用户清晰地知道自己的位置，提高用户体验。希望这篇文章能对你有所帮助。