CSS:target用法与锚点样式控制详解

CSS的`:target`伪类是一种无需JavaScript即可实现页面交互的强大工具，它能根据URL中的锚点片段（如`#section1`）自动选中并高亮对应ID的元素，广泛应用于内容定位高亮、无JS标签页切换和模态框显隐等场景；通过结合CSS动画、过渡和`display`控制，不仅能提升用户体验与视觉引导效果，还为静态页面提供了轻量、可靠且可降级的交互方案。

当页面 URL 中包含片段标识符（即以 # 开头的锚点）时，CSS 的 :target 伪类可以选中该 ID 对应的元素，从而为其应用特定样式。这个特性非常适合用于突出显示当前跳转到的内容区域，提升用户体验。

基本语法与原理

:target 匹配的是当前被锚链接指向的、ID 与 URL 片段一致的元素。

使用方式如下：

#section1:target {
  background-color: yellow;
  padding: 10px;
  border: 2px solid orange;
}

常见应用场景

1. 高亮导航目标内容
点击目录跳转后，让对应章节短暂高亮，帮助用户快速定位。

示例代码：

<nav>
  <a href="#intro">简介</a>
  <a href="#detail">详情</a>
</nav>
<p><section id="intro">这里是简介内容</section>
<section id="detail">这里是详细内容</section></p>

CSS 设置：

.highlight:target {
  animation: highlightFade 2s ease-out;
}
<p>@keyframes highlightFade {
from { background-color: #ffeb3b; }
to { background-color: transparent; }
}</p>

这样用户点击锚点跳转后，目标区域会先亮黄再慢慢恢复，视觉引导更自然。

2. 实现简单的标签页或模态框（无需 JavaScript）

利用 :target 控制元素的 display 或 opacity，可实现基础的显隐效果。

例如模态框：

<a href="#modal">打开弹窗</a>
<div class="modal" id="modal">
  <p>这是弹窗内容</p>
  <a href="#">关闭</a>
</div>

CSS 样式：

.modal {
  display: none;
}
.modal:target {
  display: block;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: white;
  padding: 20px;
  border: 1px solid #ccc;
  z-index: 1000;
}

点击“打开弹窗”后，URL 变为 #modal，弹窗显示；点击关闭链接（href="#"），URL 片段清空，弹窗隐藏。

注意事项与技巧

:target 只作用于具有对应 ID 的单个元素，且必须是当前 URL 锚点匹配的元素。

• ID 必须唯一，否则行为不可预测
• 动画结束后样式会保留或消失，取决于你如何设置关键帧或属性
• 可用于配合过渡效果，如淡入、滑动等，增强交互感
• 在打印样式中通常不生效

基本上就这些。用好 :target 能在不写 JS 的情况下实现轻量级交互，适合静态页面或作为降级方案。关键是理解其依赖 URL 锚点的机制，合理设计 ID 和样式表现。不复杂但容易忽略。

到这里，我们也就讲完了《CSS:target用法与锚点样式控制详解》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于的知识点！