当前位置：首页 > 文章列表 > 文章 > 前端 > CSS:target样式应用全解析

CSS:target样式应用全解析

2025-11-30 09:18:27 0浏览收藏

CSS `:target` 伪类是提升网页用户体验的利器，它允许开发者在用户点击锚点链接时，为目标元素应用特定样式，例如高亮显示、创建无 JavaScript 的标签页或简易弹窗。本文将深入解析 `:target` 的语法、实用场景及注意事项，助你轻松掌握这一 CSS 技巧。`:target` 伪类兼容主流浏览器，通过 `#id:target` 选择器，可以为指定 ID 的元素添加样式，配合 `transition` 属性，更可实现平滑的视觉过渡效果。了解 `:target` 的使用，能有效改善页面交互，尤其适用于轻量级项目和渐进增强设计，无需依赖 JavaScript 即可实现丰富的动态效果。

:target 伪类用于匹配 URL 锚点指向的元素，通过 #id:target 可为其添加样式，实现高亮、标签页或无 JS 弹窗；支持主流浏览器，需确保 ID 单一，配合 transition 提升视觉效果。

css伪类:target锚点定位样式应用

当页面 URL 包含一个片段标识符（即以 # 开头的锚点）时，浏览器会尝试滚动到与该 ID 匹配的元素。利用 CSS 的 :target 伪类，我们可以为当前被锚点指向的元素添加特定样式，从而提升用户体验和交互性。

什么是 :target 伪类？

:target 是一个 CSS 伪类，用于匹配当前 URL 锚点所指向的元素。只有当某个元素的 ID 与地址栏中的片段一致时，该元素才会应用 :target 定义的样式。

例如，若 URL 为 page.html#section1，那么 ID 为 section1 的元素就会被 :target 选中。

基本语法与使用示例

使用方式非常简单，只需在选择器后加上 :target 即可：

#my-section:target {
  background-color: yellow;
  padding: 10px;
  border: 2px solid red;
}

当用户点击链接跳转到该锚点时，对应的内容区域将高亮显示，帮助用户快速识别定位位置。

实用应用场景

内容高亮：在文档或帮助页面中，让目标段落短暂高亮，提高可读性。
简易标签页（Tab）效果：不使用 JavaScript，仅通过锚点切换显示不同内容块。
弹窗展示：配合 opacity 和 visibility，实现基于锚点的模态框或提示层。

例如，实现一个无 JS 的弹窗：

.modal {
  display: none;
}
.modal:target {
  display: block;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: white;
  padding: 20px;
  box-shadow: 0 0 10px rgba(0,0,0,0.5);
  z-index: 1000;
}

通过 打开弹窗 触发显示，再用关闭链接跳回默认状态（如关闭）。