CSS中没有可用的:current伪类，当前页高亮需通过HTML添加.active类并配合CSS样式实现，或由后端模板、前端路由动态控制该类名。
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 表示“当前访问页面”。
它适合这种需求：
- 鼠标悬停或键盘聚焦时，整个导航项区域高亮（含图标+文字）
- 下拉菜单打开后，父级菜单项保持视觉激活态
示例（聚焦时高亮整个 <li>）：
nav li:focus-within {
background-color: #f8f9fa;
}
? 补充：伪类误区澄清
-
:current：仅存在于规范草案，无浏览器支持，不可用于生产环境 -
:target：匹配 URL 中 fragment（如#section2）对应元素，适用于锚点跳转，不是页面级导航高亮 -
:visited：只对已访问过的链接生效，且样式受限（只能改 color，且现代浏览器进一步限制），不推荐用于当前页标识
? 小技巧：避免重复写 JS 控制 active
如果纯静态页没后端，可用简单 JS 自动匹配当前路径并加 .active：
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');
}
});
});
基本上就这些。当前页高亮本质是状态同步问题，核心在于让 HTML 准确反映路由状态，CSS 只负责呈现 —— 类名驱动，而非伪类幻想。
