正确做法是使用.active类名标记当前页面导航项，通过CSS设置醒目样式实现持续高亮，而非依赖仅瞬时生效的:active伪类，可结合背景色、加粗、边框等提升视觉反馈，并为移动端添加点击态优化交互体验。
导航栏点击时颜色不明显，主要是因为 :active 伪类只在鼠标按下期间生效，一松开就消失，用户很难察觉。这并不是实现“当前页面高亮”的理想方式。真正需要的是让当前页面对应的导航项一直保持醒目状态。
理解 :active 和当前状态的区别
:active 是 CSS 伪类，用于定义元素被激活（比如鼠标点击按下）的瞬间样式。它不会持久保留，不适合用来表示“当前页面”或“选中状态”。
要实现导航高亮，应该用别的方法来标记“当前页”。
正确做法：使用 .active 类名
给当前页面对应的导航链接添加一个类，比如 class="active"，然后用 CSS 设置更明显的颜色。
立即学习“前端免费学习笔记（深入）”；
/* HTML *// CSS / nav a.active { color: #fff; background-color: #007acc; font-weight: bold; }
提升视觉反馈的小技巧
为了让高亮更清晰，可以结合多种样式变化：
- 使用对比强烈的背景色和文字色
- 加粗文字（font-weight: bold）
- 添加下划线或边框（如 border-left 或 box-shadow）
- 稍微调整内边距，让视觉区块更大
移动端也要考虑点击反馈
虽然 .active 类用于标识当前页，但如果想增强点击时的即时反馈，可以用 :active 配合 touch 设备优化：
nav a:active {
opacity: 0.7;
transition: opacity 0.1s;
}
这样用户点击时会有一个轻微的变暗效果，提升交互感，但不影响当前页的持续高亮。
基本上就这些。别再依赖 :active 实现导航高亮了，用 class="active" 才是标准做法，灵活又可靠。
