CSS如何实现鼠标点击li显示被选中并保持选中状态

你可以使用CSS中的`:active`伪类和`:focus`伪类来实现鼠标点击li元素时被选中并保持选中状态。

首先，使用`:active`伪类来定义当点击li元素时应用的样式，例如：

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

这将使li元素在被点击时具有灰色背景色。

然后，使用`:focus`伪类来定义当li元素获得焦点时应用的样式，例如：

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

这将使li元素在获得焦点时具有灰色背景色，并且删除默认的蓝色边框。

请注意，`:focus`伪类只适用于可获取焦点的元素，如a、input等。如果要使li元素可获取焦点，请为其添加tabindex属性，例如：

<li tabindex="0">列表项</li>

这样，用户就可以使用键盘导航到li元素并将其选中。

最后，为了保持选中状态，您可以使用JavaScript在li元素被点击时添加一个类，例如：

li.selected {
  background-color: #ccc;
}

然后，您可以在JavaScript中使用以下代码来添加和删除该类：

// 获取所有li元素
const lis = document.querySelectorAll('li');

// 为每个li元素添加点击事件监听器
lis.forEach(li => {
  li.addEventListener('click', () => {
    // 删除所有li元素的selected类
    lis.forEach(li => {
      li.classList.remove('selected');
    });
    // 为被点击的li元素添加selected类
    li.classList.add('selected');
  });
});

这样，当用户点击li元素时，它将获得selected类，并保持选中状态，直到用户单击其他li元素。