使用伪类选择器可提升导航菜单的交互体验与可访问性。通过 :hover 改变背景色、添加过渡效果并控制下拉菜单展开，增强悬停反馈；利用 :focus 为键盘导航提供明显轮廓和高亮，确保辅助设备可用；通过 :active 模拟点击时的按压效果，配合 translateY 和背景变化提升触控感知；结合 :not(:first-child) 简化非首项间距样式，减少冗余类名。遵循 LVHA 原则合理组合这些伪类，能在降低 JavaScript 依赖的同时实现美观且易用的导航交互。
在CSS中使用伪类选择器可以显著提升导航菜单的交互体验和视觉表现，同时减少对JavaScript的依赖。通过合理运用伪类，可以让菜单在不同状态下呈现更自然的效果，比如悬停、聚焦、激活等。
:hover 优化悬停效果
利用 :hover 可以增强用户对可点击项的感知：
- 改变背景色或文字颜色，提供清晰的反馈
- 添加平滑过渡（transition）使颜色或位移变化更柔和
- 用于下拉菜单的显示控制，配合子菜单实现 hover 展开
示例：
nav ul li:hover {
background-color: #007acc;
color: white;
}
nav ul li a {
transition: all 0.3s ease;
}
:focus 提升可访问性
键盘用户依赖焦点导航，使用 :focus 确保菜单对辅助设备友好：
立即学习“前端免费学习笔记（深入）”；
- 为链接添加明显的轮廓或背景高亮
- 避免移除 outline 后不提供替代样式
- 结合 tabindex 可让非交互元素也可聚焦
示例：
nav a:focus {
outline: 2px solid #005f9e;
background-color: #e0f0ff;
}
:active 增强点击反馈
:active 在用户点击瞬间触发，适合模拟“按下”状态：
- 轻微下移或加深背景，模仿按钮按压感
- 适用于移动端触控反馈
- 与 :hover 配合使用时注意顺序（LVHA原则）
示例：
nav a:active {
transform: translateY(1px);
background-color: #005a8c;
}
:not(:first-child) 精简样式逻辑
使用结构伪类避免为列表项单独添加类名：
- 为非首个菜单项添加左侧边框或间距
- 简化HTML结构，保持语义化
示例：
nav ul li:not(:first-child) {
margin-left: 10px;
}
基本上就这些。合理组合这些伪类，既能提升用户体验，又能保持代码简洁。关键是注重状态反馈和可访问性，让导航不仅好看，也好用。
