最直接方式是JS动态增删active类并配合CSS样式控制选中项颜色，需确保HTML元素有唯一标识、初始化默认选中、避免伪类:active/:focus的瞬态局限，优先用CSS+radio实现无JS高亮，注意类名统一与优先级冲突。
怎么用 active 类控制选中项颜色
最直接的方式是给当前选中的元素加上一个 active 类，然后在 CSS 里写对应样式。这要求 JS 主动管理类名增删，而不是靠伪类自动触发。
- HTML 中先确保每个可选元素有唯一标识（比如
data-id或id），方便 JS 定位 - 点击时先清除所有
active，再给目标加active—— 否则会出现多个高亮 - 别忘了在初始化时设置默认选中项的
active，否则首次加载没高亮
.item { color: #666; }
.item.active { color: #007bff; font-weight: bold; }
:focus 和 :active 为什么点一下就没了
这两个是瞬态伪类：:active 只在鼠标按下瞬间生效，:focus 默认只对可聚焦元素（如 <button></button>、<a></a>）有效，且 Tab 切换后才稳定出现。它们不适合做“持续选中”状态。
- 如果元素不是原生可聚焦的（比如
<div>），要加 <code>tabindex="0"才能响应:focus -
:active无法维持，纯 CSS 没法靠它记住“哪个被点了” - 移动端点击还可能触发短暂的
:active，但紧接着失焦，视觉上更难捕捉 - 把
<input type="radio">放在文字前，用display: none隐藏它 - 用相邻兄弟选择器
input:checked + label或通用兄弟选择器匹配对应标签 - 确保
label的for属性和input的id匹配，否则点击无效
用 :checked + 隐藏单选框实现无 JS 高亮
适合单选场景（如选项卡、表单单选组），利用表单控件的原生状态，完全不用 JS。
input[type="radio"] { display: none; }
input:checked + label { color: #007bff; background: #f8f9fa; }
动态切换时 class 名拼错或作用域不对
常见错误不是逻辑写错，而是类名打字偏差或 CSS 优先级被覆盖。
立即学习“前端免费学习笔记（深入）”；
- 检查 JS 里用的是
element.classList.add("active")还是误写成addClass("active")（后者会报错） - CSS 中如果用了
.menu .item.active，但实际 DOM 结构是<div class="item"> 没包在 <code>.menu里，样式就不生效 - 第三方 UI 库（如 Bootstrap）可能自带
.active样式，和你写的冲突，建议加命名空间，比如用.my-list-item.active
真正麻烦的往往不是怎么写，而是类名散落在 JS、HTML、CSS 三处，改一处漏两处。上线前最好搜一遍整个项目里的 active，确认含义统一。
