如何通过 :active 与 background-color 实现导航菜单的选中背景色
核心原理与行为要点
在 CSS 中，:active 伪类表示当前被用户按下的元素。当用于导航菜单中的 链接项 时，背景色 可以通过 background-color 的改变来直观表达“正在进入选中状态”的视觉反馈。
需要理解的是 :active 的生命周期通常较短，只有在按下没有松开时才会生效。因此它更像是“按下中的状态”而非长期选中状态。
在实现时，确保导航项的区域足够大以覆盖点击区域，这通常通过让 链接 或 列表项 使用 display: block 来实现，同时让背景色的变化尽量平滑，以提升用户体验。
/* 基本导航样式 */
.nav {display: flex;list-style: none;padding: 0;margin: 0;
}
.nav a {display: block;padding: 12px 20px;color: #333;text-decoration: none;background-color: #f0f0f0; /* 常态背景色 */
}
.nav a:active {background-color: #c8e6c9; /* 选中状态背景色在按下时生效 */
}
兼容性与可访问性注意事项
跨浏览器行为与键盘交互
在主流浏览器中，:active 通常会在按下时触发，因此 Chrome、Firefox、Edge 和 Safari 均能正确呈现后台色的变化。
为了让使用键盘导航的用户也能获得同样的视觉反馈，可以在样式中同时定义一个与 :active 等效的状态（例如通过 hover 提升可点击区域的视觉提示），确保页面在无鼠标的情况下也有一致性体验。
需要无障碍性 的话，尽管 :active 是交互态的一部分，但若要长期展示“选中状态”，通常需要额外的类名切换或 JS 来实现持久高亮。这里的核心点在于利用 background-color 的变化来传达状态信息。
/* 额外的无障碍提示（可选，若只用 :active 则可忽略） */
.nav a:hover {background-color: #e6f7ff;
}
实战示例：一个简单的水平导航
结构与实现步骤
下面提供一个简单的导航结构，包含一个无序列表和链接项，作为 导航菜单 的基础实现。
通过应用 background-color 与 :active，可以在按下链接时，人眼能立刻识别到“选中状态”的变化，这对于移动端也很关键。
请关注代码中的注释部分，您可以直接将其嵌入到现有页面中，与您的网站全局样式保持一致。
/* 简单的水平导航样式，基于 :active 实现选中背景色 */
.nav {display: flex;list-style: none;padding: 0;margin: 0;background-color: #fff;
}
.nav > li + li {margin-left: 8px;
}
.nav a {display: block;padding: 12px 16px;color: #333;text-decoration: none;border-radius: 4px;background-color: #f0f0f0;
}
.nav a:active {background-color: #c8e6c9;
}
