CSS伪类:target如何使用_锚点元素样式控制-css教程-PHP中文网

CSS伪类:target如何使用_锚点元素样式控制

P粉602998670

发布： 2025-11-21 17:19:56

原创

886人浏览过

:target伪类通过URL片段高亮对应ID元素，可用于内容定位、标签页或模态框显示。例如#section1匹配id="section1"元素，结合动画或display切换实现无JS交互，提升用户体验。

css伪类:target如何使用_锚点元素样式控制

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

基本语法与原理

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

例如，URL 是 page.html#section1，那么 ID 为 section1 的元素就会匹配 :target 伪类。

使用方式如下：

#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>

登录后复制

CSS 设置：

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

登录后复制

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

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

MagicStudio

图片处理必备效率神器！为你的图片提供神奇魔法

102

查看详情

利用 :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 片段清空，弹窗隐藏。