纯 css 无法自动识别当前页面并高亮导航项，因浏览器无内置 url 与链接关联机制；:active 仅瞬时生效，:current 非合法伪类；可靠方案是 html 手动加 active 类配合 css 样式，或用 js 根据 pathname 动态匹配。
纯 CSS 无法自动识别“当前页面”并高亮对应导航项——浏览器没有内置机制把 URL 和导航链接关联起来。必须靠 HTML 手动标记或 JS 动态控制，CSS 只负责样式渲染。
为什么 :active 和 :current 都不行
:active 只在鼠标按下瞬间触发，松开就失效，不能表示“当前页”状态；:current 不是合法 CSS 伪类，所有浏览器都不支持。网上搜到的这类写法会直接被忽略。
常见错误现象：
- 写了
a:current { color: red; }，但完全没效果 - 用
a:active测试时发现只点着才变色，刷新页面后立刻恢复
正确做法：HTML 中显式加 active 类
这是静态网站（如 Replit、GitHub Pages）最可靠的方式，不依赖 JS 或服务端逻辑。
操作步骤：
- 每个页面里，找到对应导航链接，手动加上
class="active"，比如首页的@#@#@#@#@#@#@#@#@#@0 - CSS 中用
.nav-link.active定义样式，例如背景色、加粗、边框等 - 确保其他页面中，这个
active类只出现在当前页对应的链接上，别漏改也别多加
示例 CSS：
.nav-link {
color: #666;
text-decoration: none;
}
.nav-link.active {
color: #007bff;
font-weight: 600;
background-color: #eef5ff;
border-radius: 4px;
padding: 4px 12px;
}
想自动匹配 URL？得靠 JavaScript
如果不想每改一个页面就手动调一次 active 类，可以用 JS 根据 window.location.pathname 自动添加。
关键点：
- 匹配逻辑要小心：避免
/products错误高亮/products-list，建议用href值全等或路径前缀精确比对 - 必须在 DOM 加载完成后执行，否则找不到元素
- 单页应用（SPA）需监听
hashchange或使用路由库的钩子，否则前进/后退不会更新高亮
简短参考代码：
document.querySelectorAll('.nav-link').forEach(link => {
const href = new URL(link.href).pathname;
if (href === window.location.pathname) {
link.classList.add('active');
}
});
别踩 :target 的坑
有人试过用 section:target ~ nav a[href="#about"] 实现高亮，这条路走不通：
- 它要求目标
<section id="about"></section>必须在<nav></nav>后面且同级，结构僵硬 - 页面首次加载时没有 hash，
:target不生效，“首页”永远不亮 - 每个 ID 都要单独写一条 CSS 规则，5 个菜单就得写 5 条，维护成本高
真正可控、可预测、可访问的方案，始终是显式类名 + CSS 样式。复杂点在于多页面时要同步维护 HTML，而不是技术本身有多难。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
