CSS :target锚点样式实现方法

CSS 的 `:target` 伪类提供了一种无需 JavaScript 即可实现锚点高亮、内容展开、简易选项卡切换和错误定位等交互效果的轻量级方案——当 URL 中包含 `#` 片段标识符时，浏览器自动滚动至对应 ID 元素，而 `:target` 则精准捕获该元素并应用自定义样式，既提升了静态页面的可用性与视觉反馈，又兼顾了简洁性和兼容性（仅需注意 ID 唯一性及避开 IE8 及以下浏览器），是文档、帮助页和单页内容组织中常被低估却极为实用的 CSS 小技巧。

当页面 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>
</p>

CSS 样式：

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

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

实用应用场景

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

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

示例：点击链接展开内容

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

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

注意事项与兼容性

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

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

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

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~