:target伪类仅能高亮URL锚点对应的内容区块,无法直接高亮导航标签;需用JavaScript监听hashchange事件动态添加.active类来实现标签高亮。

用 :target 伪类实现标签切换时高亮当前项,前提是每个标签对应一个带 id 的区块,且通过锚点链接跳转。它本身不控制“标签”的选中状态,而是响应 URL 中的 fragment(即 #xxx)自动匹配目标元素。
前提:结构要符合锚点跳转逻辑
确保你的标签是超链接,href 指向对应内容块的 id:
内容一 内容二 内容三
用 :target 配合标签实现高亮
:target 作用于被 URL fragment 选中的元素(比如 #section2 对应 section#section2),但你想高亮的是 对应的标签链接,不是内容块本身。CSS 无法反向从 section:target 去样式化前面的 a(不支持父选择器或跨兄弟选择)。所以需借助间接方式:
- 给每个
a添加与目标id对应的data-target属性 - 利用 URL fragment 变化 + JavaScript 监听
hashchange,动态添加.active类 - 纯 CSS 方案只能高亮
section:target,不能直接高亮a
纯 CSS 可行的高亮方式(仅限内容块)
如果只需视觉上突出当前展示的内容区,直接写:
立即学习“前端免费学习笔记(深入)”;
section:target {
background-color: #f0f8ff;
padding: 1rem;
border-left: 4px solid #4a90e2;
}
这样点击标签后,对应 section 就会高亮——这是 :target 最标准、无需 JS 的用法。
想高亮标签本身?推荐轻量 JS 方案
监听地址栏 hash 变化,更新 a 的状态:
CSS 补一句:
nav a.active { color: #4a90e2; font-weight: bold; }
基本上就这些。:target 很干净,但有局限;真要操作导航项状态,JS 是更自然、可控的选择。











