css伪类:target锚点定位样式实现

:target伪类可选中URL锚点指向的元素并添加样式。当页面URL含#片段标识符时，ID与之匹配的元素被高亮，如h2:target设置背景色和边框，实现无需JavaScript的交互效果，常用于内容展开、选项卡切换和错误定位，需注意ID唯一性和浏览器兼容性，适用于静态页面增强用户体验。

当页面 URL 包含一个片段标识符（即以 # 开头的锚点），浏览器会尝试滚动到 ID 与该片段匹配的元素。利用 CSS 的 :target 伪类，我们可以为当前被锚点指向的元素添加特定样式，实现简单的交互效果而无需 JavaScript。

什么是 :target 伪类？

:target 是一种 CSS 伪类，用于选中当前 URL 锚点所指向的元素。只有当某个元素的 ID 与地址栏中的哈希值相同时，该伪类才会生效。

基本语法和使用示例

使用方式非常简单，只需在选择器后加上 :target 即可定义目标元素的高亮样式。

HTML 结构：

立即学习“前端免费学习笔记（深入）”；

<h2 id="intro">简介</h2>
<p>这里是简介内容...</p>
<p><h2 id="setup">安装步骤</h2>
<p>这里是安装说明...</p></p><p><a href="#intro">跳转到简介</a>
<a href="#setup">跳转到安装步骤</a>

CSS 样式：

h2:target {
  background-color: yellow;
  padding: 5px;
  border-left: 4px solid red;
}

点击链接后，对应的标题背景变黄，左侧出现红色边框，视觉上突出显示当前定位部分。

造点AI

夸克 · 造点AI

325

查看详情

实用应用场景

:target 不仅可用于高亮文本，还能实现一些轻量级交互：

• 内容展开/折叠：点击链接显示隐藏内容
• 简易选项卡：通过锚点切换不同面板
• 错误定位提示：表单验证失败时高亮问题区域

示例：点击链接展开内容

.hidden-content {
  display: none;
}
<p>.section:target .hidden-content {
display: block;
}

当用户点击指向某个 section 的链接时，其内部的 hidden-content 会显示出来。

注意事项与兼容性

虽然 :target 功能简洁有效，但使用时需注意以下几点：

• 必须确保 HTML 中存在与哈希值匹配的 ID，ID 不能重复
• 不支持低版本 IE（IE8 及以下）
• 无法监听状态变化，复杂交互仍需 JavaScript 配合
• 页面加载时若已有 hash，:target 立即生效

基本上就这些。合理使用 :target 能提升用户体验，尤其适合文档、帮助页面等静态内容的锚点增强。不复杂但容易忽略的小技巧。

以上就是css伪类:target锚点定位样式实现的详细内容，更多请关注php中文网其它相关文章！