纯CSS无法持久保持导航项选中状态，唯一不依赖JS的方案是用radio+label模拟；:focus和:active仅瞬时生效；radio需同name、label绑定id，通过:checked~控制样式；JS方案须同步URL以避免刷新丢失状态。
纯 CSS 无法在点击后持久保持导航项的“选中状态”，除非用 input[type="radio"] 模拟——这是唯一不依赖 JS 却能稳定记住点击结果的方式。其他纯 CSS 方案（比如 :focus 或 :active）都会在失焦或鼠标松开后立即失效。
为什么 :focus 和 :active 都不能当“选中”用
这两个伪类只响应瞬时交互：:active 仅在鼠标按下期间生效，:focus 在元素获得焦点时存在，但一旦你点内容区、按 Tab 切换或滚动页面，焦点就丢了。导航栏里点完一个菜单项，再点正文，高亮立刻消失——这不是 bug，是浏览器标准行为。
常见错误现象包括：
- 点击后样式闪一下就没了
- 用键盘 Tab 进入导航，回车选中后松开就退选
- 移动端点一次没反应，点两次才触发，实际是第一次聚焦、第二次才激活
用 radio + label 实现真·点击即锁定
原理是把 input[type="radio"] 隐藏，用 label 绑定它，再通过兄弟选择器 ~ 控制紧随其后的导航项样式。只要没点别的 radio，当前项就一直“被选中”。
关键实操点：
- 每个
input必须有相同name（如name="nav"），才能互斥 -
label的for属性必须匹配input的id，不能只靠包裹关系 - 选中态样式必须写在
input:checked ~ .nav-item这类组合器下，不能写成.nav-item:checked（label才是可点击元素） - 初始默认选中：给第一个
input加checked属性即可
示例片段：
<input type="radio" name="nav" id="nav-home" checked><label for="nav-home" class="nav-item">首页</label>
<input type="radio" name="nav" id="nav-about"><label for="nav-about" class="nav-item">关于</label>
<style>
.nav-item { color: #666; }
input[type="radio"] { display: none; }
input#nav-home:checked ~ .nav-item:nth-of-type(1),
input#nav-about:checked ~ .nav-item:nth-of-type(2) {
color: #007bff;
font-weight: bold;
}
</style>
如果必须用 JavaScript，别漏掉 history.pushState
用 JS 切换 class="active" 很简单，但用户刷新页面后状态丢失——因为 DOM 状态不持久。真正可用的方案得配合 URL 同步：
- 点击时调用
history.pushState()更新地址栏（如从/变成/about） - 监听
popstate事件，页面前进/后退时恢复对应导航高亮 - 加载时读取
location.pathname，初始化正确项的active类 - 避免直接操作
innerHTML替换整个导航栏，否则事件绑定丢失，要用事件委托
最容易被忽略的是：SPA 场景下，光改样式不够，URL 不同步会导致分享链接失效、SEO 抓取错乱、后退键跳转异常。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
