CSS无内置“当前页导航项”伪类，:current未被浏览器支持；需通过服务端模板、JS动态添加class="current"或前端框架路由绑定，再用CSS如nav a.current设置样式。
CSS 本身没有内置的 “当前页导航项” 伪类（比如 :current），浏览器目前不支持 :current 伪类用于导航高亮。所谓 “current 相关伪类” 是一个常见误解——CSS 标准中虽曾提案 :current（用于文档中当前滚动到的元素，类似锚点高亮），但它仅作用于文档流中被 :target 或阅读器/滚动位置匹配的元素，不能自动识别“当前页面对应的导航链接”。
真正可行的方式：服务端或 JS 注入 class
要让导航项显示“当前页”状态，核心思路是：在 HTML 中为对应 <a></a> 或 <li> 显式添加一个标识类（如 active 或 current），再用 CSS 选中它：
- 后端模板（如 PHP、Jinja、EJS）根据当前 URL 主动给匹配的导航项加
class="current" - 前端 JS 在页面加载时读取
window.location.pathname，遍历导航链接，给href匹配的元素添加current类 - 使用前端框架（Vue/React）通过路由对象动态绑定 active class
CSS 中如何写样式（推荐用 .current）
假设你在 HTML 中已正确添加了 class="current"：
对应 CSS 可直接写：
立即学习“前端免费学习笔记（深入）”；
nav a.current {color: #007bff;
font-weight: bold;
border-bottom: 2px solid #007bff;
}
/* 或更稳妥地加层级和 hover 兼容 */
nav li a.current,
nav li a:hover {
color: #007bff;
}
注意：不要依赖 :target 模拟 current（有局限）
有人尝试用 <a href="#about"></a> + a:target 实现高亮，但这只在点击锚点跳转后临时生效，且要求 URL 含哈希（如 /page#about），无法反映真实页面路由状态，也不适用于多页应用（SPA）或常规跳转。它不是“当前页”，只是“当前锚点”。
补充：CSS Selectors Level 4 的 :current 是什么？
CSS Selectors Level 4 确实定义了 :current，但它的语义是：匹配当前被用户代理（如浏览器）视为‘正在阅读’的元素（例如滚动到视口中心的标题）。它需配合 element 或 ID 使用，且尚未被任何主流浏览器实现。MDN 明确标注为 "Not supported in any browser"。所以目前不可用于导航高亮。
