正确实现导航选中状态应使用class而非:active，因:active仅在点击时生效；推荐为当前页链接添加.active类以持久高亮，如nav a.active {background-color: #007acc; color: white;}，并可在HTML中为对应页面链接添加class="active"实现选中效果，同时保留:active用于点击反馈。
在CSS中，实现导航菜单选中状态的背景色，通常不是用 :active 来长期保留“选中”效果，因为 :active 只在鼠标点击按下时生效，松开即消失。它适合表现“正在点击”的瞬时状态，而不是“当前页面被选中”的持久状态。
正确理解 :active 的作用
:active 伪类用于定义元素被激活（如鼠标按下）时的样式。例如：
nav a:active {
background-color: #007acc;
color: white;
}
这个效果只在你按住链接不放时出现，一旦松手就恢复原样。因此它不适合用来表示“当前页面选中”。
立即学习“前端免费学习笔记（深入）”；
实现“选中状态”的推荐方法
要让某个导航项显示为“当前选中”，应通过以下方式之一设置持久背景色：
-
手动添加 class：在当前页面对应的导航项上添加一个类，比如
.active - 使用 CSS 的 :target（针对锚点）
- JavaScript 动态控制选中状态
最常见且实用的是第一种。示例：
nav a {
display: inline-block;
padding: 10px 15px;
text-decoration: none;
color: #333;
}
nav a.active {
background-color: #007acc;
color: white;
}
HTML 中标记当前页：
结合 :active 增强交互体验
你可以同时使用 :active 和 .active，提升用户体验：
/* 当前选中项 */
nav a.active {
background-color: #007acc;
color: white;
}
/ 点击瞬间加深背景 /
nav a:active {
background-color: #005fa3;
}
这样用户点击时会有更明显的反馈，而当前页面始终保持高亮。
基本上就这些。别指望 :active 能记住选中状态，它只是个“瞬间动作”。要用 class 才能真正实现“选中”视觉效果。
