答案：通过CSS的:active伪类可实现点击时的临时高亮效果，松开即消失；若需持久选中，则需JavaScript动态添加.selected类来维持状态，配合事件监听实现单选或多选，推荐结合tabindex和键盘事件提升可访问性。
要实现列表项点击选中效果，可以通过 CSS 的 :active 伪类实现短暂的按下状态，但若需要“保持”选中状态（比如点一下就高亮并持续显示），则需借助 JavaScript 动态添加样式类。下面分别介绍两种方式。
使用 :active 伪类（临时点击效果）
这个方法适合用于按钮或链接被按下的瞬间视觉反馈，但松开鼠标后样式会消失。例如：
.list-item:active {
background-color: #007cba;
color: white;
}
这种方式简单，无需 JS，但仅在鼠标按下时生效，无法“记住”哪个项被选中。
使用 JavaScript 添加选中类（持久选中效果）
如果希望点击后该项一直保持高亮（类似单选或多选效果），需要用 JavaScript 控制类名切换。示例代码：
立即学习“前端免费学习笔记（深入）”；
- 选项 1
- 选项 2
- 选项 3
CSS 样式：
.list-item {
padding: 10px;
cursor: pointer;
}
.list-item.selected {
background-color: #007cba;
color: white;
}
JavaScript 实现单选效果：
const items = document.querySelectorAll('.list-item');
items.forEach(item => {
item.addEventListener('click', function() {
// 先移除所有选中状态
items.forEach(i => i.classList.remove('selected'));
// 给当前点击项添加选中类
this.classList.add('selected');
});
});
如果是多选，去掉移除部分即可：
item.addEventListener('click', function() {
this.classList.toggle('selected');
});
结合语义化结构和键盘支持（可选优化）
为了更好的可访问性，建议将可点击的列表项用 button 或加 tabindex，并支持回车或空格触发。例如：
再在 JS 中监听 keydown 事件处理键盘操作。
基本上就这些。想快速反馈用 :active，想持久选中就用 JS 控制 class。不复杂但容易忽略细节。
