正确实现导航选中状态应使用class而非:active，因:active仅在点击时生效；推荐为当前页链接添加.active类以持久高亮，如nav a.active {background-color: #007acc; color: white;}，并可在HTML中为对应页面链接添加class="active"实现选中效果，同时保留:active用于点击反馈。
在CSS中，实现导航菜单选中状态的背景色，通常不是用 :active 来长期保留“选中”效果，因为 :active 只在鼠标点击按下时生效，松开即消失。它适合表现“正在点击”的瞬时状态，而不是“当前页面被选中”的持久状态。
:active 伪类用于定义元素被激活（如鼠标按下）时的样式。例如：
nav a:active {
background-color: #007acc;
color: white;
}
这个效果只在你按住链接不放时出现，一旦松手就恢复原样。因此它不适合用来表示“当前页面选中”。
立即学习“前端免费学习笔记（深入）”；
要让某个导航项显示为“当前选中”，应通过以下方式之一设置持久背景色：
.active
最常见且实用的是第一种。示例：
nav a {
display: inline-block;
padding: 10px 15px;
text-decoration: none;
color: #333;
}
<p>nav a.active {
background-color: #007acc;
color: white;
}</p>HTML 中标记当前页：
<nav> <a href="index.html" class="active">首页</a> <a href="about.html">关于我们</a> <a href="contact.html">联系</a> </nav>
你可以同时使用 :active 和 .active，提升用户体验：
/* 当前选中项 */
nav a.active {
background-color: #007acc;
color: white;
}
<p>/<em> 点击瞬间加深背景 </em>/
nav a:active {
background-color: #005fa3;
}</p>这样用户点击时会有更明显的反馈，而当前页面始终保持高亮。
基本上就这些。别指望 :active 能记住选中状态，它只是个“瞬间动作”。要用 class 才能真正实现“选中”视觉效果。
以上就是css导航菜单选中状态背景色如何实现_使用:active和background-color的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
668
收藏
