17370845950

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

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

基本语法与原理

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

使用方式如下：

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

常见应用场景

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

示例代码：

这里是简介内容
这里是详细内容

CSS 设置：

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

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

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

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

例如模态框：

打开弹窗

  
这是弹窗内容
  关闭

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 和样式表现。不复杂但容易忽略。