css li 点击背景色改变

要实现当用户点击列表项时，该列表项的背景色改变并保持不变的效果，可以使用CSS中的`:focus`伪类选择器。该选择器用于选中当前获得了焦点的元素，例如被点击的输入框或按钮。

以下是一个示例CSS代码，当用户点击一个li元素时，该元素的背景色会变成灰色，并保持该颜色直到另一个li元素被点击：

li:focus {
  background-color: gray;
}

需要注意的是，该效果在不同浏览器中可能会有所不同，因为用户点击列表项后可能会导致列表项失去焦点，从而导致背景色恢复为原来的颜色。如果需要在用户点击列表项后一直保持背景色不变，可以使用JavaScript代码实现。

相关问题

css li 点击出现背景色

要实现当用户点击列表项时出现背景色的效果，可以使用CSS中的`:active`伪类选择器。该选择器用于选中用户正在交互的元素，例如被点击的链接或按钮。

以下是一个示例CSS代码，当用户点击一个li元素时，该元素的背景色会变成灰色：

li:active {
  background-color: gray;
}

需要注意的是，该效果只在用户点击该列表项时出现，当用户释放鼠标时，背景色会恢复为原来的颜色。如果需要在用户将鼠标悬停在列表项上时也出现背景色，可以使用CSS中的`:hover`伪类选择器。

li标签鼠标点击改变背景色

可以使用CSS来实现li标签鼠标点击改变背景色的效果。具体实现方法如下：

1. 给li标签添加一个class，比如说"bg-change"。

2. 在CSS中定义"bg-change"类的样式，包括默认背景色和鼠标点击后的背景色：

.bg-change {
  background-color: #fff; /* 默认背景色 */
}

.bg-change:hover, .bg-change:focus {
  background-color: #f0f0f0; /* 鼠标悬停或者获取焦点后的背景色 */
}

3. 给li标签添加点击事件，当鼠标点击li标签时，自动给它添加"active"类，同时移除其他兄弟元素的"active"类：

var lis = document.querySelectorAll("li.bg-change");

for (var i = 0; i < lis.length; i++) {
  lis[i].addEventListener("click", function() {
    var siblings = this.parentNode.children;
    for (var j = 0; j < siblings.length; j++) {
      siblings[j].classList.remove("active");
    }
    this.classList.add("active");
  });
}

4. 在CSS中定义"active"类的样式，用来表示当前选中的li标签：

.bg-change.active {
  background-color: #e0e0e0; /* 当前选中的背景色 */
}

这样就可以实现li标签鼠标点击改变背景色的效果了。