如何用css:target制作单页导航高亮_石家庄创泽智能科技有限公司

新闻中心 NEWS CENTER

您当前位置：首页 > 新闻中心 > 网络学院

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

2025-10-05

浏览次数：次

返回列表

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

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

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

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

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

<n*>
  <a href="#home">首页</a>
  <a href="#about">关于</a>
  <a href="#contact">联系</a>
</n*>
<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 结构来让导航项能响应目标状态。一种常见方式是把导航和内容放在一起，利用相邻或兄弟选择器。

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

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

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

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

UXbot

AI产品设计工具

185 查看详情 UXbot

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

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

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

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

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