CSS导航栏当前页高亮实现方法

CSS导航栏当前页高亮无法依赖尚未被任何浏览器支持的`:current`伪类，真正可靠的做法是通过HTML中动态添加`.active`类（由后端模板、前端路由或轻量JS根据当前URL自动控制），再配合简洁明确的CSS样式实现视觉反馈；这种方式兼容性好、语义清晰、易于维护，也避免了`:focus-within`、`:target`、`:visited`等伪类在场景和功能上的误用——说到底，当前页高亮不是CSS能独立解决的样式问题，而是HTML状态与路由逻辑协同的结果。

CSS 中没有 :current 伪类（它属于 CSS Selectors Level 4 草案，**尚未被任何浏览器实现**），所以不能用 :current 实现导航栏当前页高亮。实际开发中，当前页高亮靠的是 **HTML 结构配合 CSS 类名（如 .active）**，再结合后端模板或前端路由动态添加该类。

✅ 正确做法：服务端/路由控制 .active 类

这是最可靠、兼容性最好、语义最清晰的方式：

• 在 HTML 中，给当前页面对应的导航项手动（或模板引擎自动）加上 class="active"
• 用 CSS 定义高亮样式，例如颜色、背景、下划线或边框
• 前端框架（Vue/React）通常由路由守卫或 NavLink（React Router）、RouterLink（Vue Router）自动处理 active-class

示例 HTML：

<nav>
  <ul>
    <li><a href="/home">首页</a></li>
    <li><a href="/about" class="active">关于</a></li>
    <li><a href="/contact">联系</a></li>
  </ul>
</nav>

CSS 样式：

nav a.active {
  color: #007bff;
  font-weight: bold;
  border-bottom: 2px solid #007bff;
}

⚠️ :focus-within 不适用于“当前页”高亮

:focus-within 是当元素自身或其任意子元素获得焦点时触发，常用于下拉菜单、表单交互等场景，比如点击导航项展开子菜单后保持父容器高亮。但它无法感知 URL 变化或页面状态，所以不能替代 .active 表示“当前访问页面”。

它适合这种需求：

• 鼠标悬停或键盘聚焦时，整个导航项区域高亮（含图标+文字）
• 下拉菜单打开后，父级菜单项保持视觉激活态

示例（聚焦时高亮整个

nav li:focus-within {
  background-color: #f8f9fa;
}

document.addEventListener('DOMContentLoaded', () => {
  const currentPath = window.location.pathname || '/';
  document.querySelectorAll('nav a').forEach(link => {
    const href = new URL(link.href).pathname;
    if (href === currentPath || (href === '/' && currentPath === '/')) {
      link.classList.add('active');
    }
  });
});