如何用css:target制作单页导航高亮

使用 :target 可实现纯 CSS 单页导航高亮，通过 URL 片段激活目标元素样式。1. 导航链接指向带 ID 的内容区；2. 利用 section:target 高亮当前内容；3. 因 CSS 无法反向选中导航，需调整结构，如将 .nav-link 置于目标区域内；4. 通过 .nav-link:target 或 div:target .nav-link 规则高亮对应导航项。适合静态页面，依赖合理 HTML 结构。

使用 :target 实现单页导航高亮，是一种纯 CSS 的方法，适合简单的页面锚点跳转场景。当 URL 中的片段标识符（即 # 后面的部分）指向页面中的某个元素时，该元素就成为“目标元素”，可以通过 :target 选择器为其添加样式，比如高亮对应的导航项。

1. 基本结构：HTML 锚点与目标元素

确保每个导航链接指向页面中的一个唯一 ID，这些元素就是可能被激活的目标。

<nav>
  <a href="#home">首页</a>
  <a href="#about">关于</a>
  <a href="#contact">联系</a>
</nav>
<p><section id="home"><h2>首页内容</h2></section>
<section id="about"><h2>关于内容</h2></section>
<section id="contact"><h2>联系内容</h2></section></p>

2. 使用 :target 高亮目标区域

你可以为当前显示的内容区域添加背景或边框，表示它是当前选中项。

section:target {
  background-color: #f0f8ff;
  border-left: 4px solid #007acc;
  padding: 20px;
}

3. 实现导航项高亮

由于 CSS 无法反向选择父级或兄弟之前的元素（除非结构允许），你需要调整 HTML 结构来让导航项能响应目标状态。一种常见方式是把导航和内容放在一起，利用相邻或兄弟选择器。

立即学习“前端免费学习笔记（深入）”；

示例：将导航放在对应内容内部，并默认隐藏，仅在目标激活时显示高亮状态。

更实用的方式是结合伪类与结构设计：

/* 默认样式 */
nav a {
  color: #333;
  text-decoration: none;
}
<p>/<em> 当点击 #about，且有一个 a[href="#about"] 存在时，怎么高亮它？ </em>/
/<em> 我们可以反过来：通过目标元素影响其“关联”的导航 —— 但需借助额外结构 </em>/</p>

如果结构不能改变，:target 无法直接选中导航链接。这时可以采用以下技巧：

知网AI智能写作

知网AI智能写作，写文档、写报告如此简单

38

查看详情

4. 替代方案：用 label 模拟导航（进阶技巧）

使用隐藏 radio 或 checkbox + label 配合 :target 复杂但可控。不过对于简单需求，推荐 JavaScript 辅助，或者接受只能高亮内容区的事实。

若坚持纯 CSS 且想高亮菜单文字，可考虑如下结构：

<div id="home">
  <a href="#home" class="nav-link">首页</a>
  <section>这里是首页内容...</section>
</div>
<p><div id="about">
<a href="#about" class="nav-link">关于</a>
<section>关于内容...</section>
</div></p>

.nav-link {
  display: block;
  margin: 10px;
  color: #000;
  text-decoration: none;
}
<p>/<em> 当前目标页的链接高亮 </em>/
.nav-link:target,
div:target .nav-link {
color: red;
font-weight: bold;
}</p>

这样，当用户点击导航进入某区块时，该区块成为目标，其内部的 .nav-link 就会被高亮。

基本上就这些。虽然 :target 功能有限，但在轻量级项目中足够实用，尤其适合无 JS 的静态页面。关键是合理安排 HTML 结构，让 CSS 能够“触及”到需要高亮的元素。

以上就是如何用css:target制作单页导航高亮的详细内容，更多请关注php中文网其它相关文章！