:target伪类可选中url锚点指向的元素并添加样式。当页面url含#片段标识符时，id与之匹配的元素被高亮，如h2:target设置背景色和边框，实现无需javascript的交互效果，常用于内容展开、选项卡切换和错误定位，需注意id唯一性和浏览器兼容性，适用于静态页面增强用户体验。
当页面 URL 包含一个片段标识符（即以 # 开头的锚点），浏览器会尝试滚动到 ID 与该片段匹配的元素。利用 CSS 的 :target 伪类，我们可以为当前被锚点指向的元素添加特定样式，实现简单的交互效果而无需 JavaScript。
什么是 :target 伪类？
:target 是一种 CSS 伪类，用于选中当前 URL 锚点所指向的元素。只有当某个元素的 ID 与地址栏中的哈希值相同时，该伪类才会生效。
例如：URL 为 page.html#section2，则 ID 为 section2 的元素会被 :target 选中。基本语法和使用示例
使用方式非常简单，只需在选择器后加上 :target 即可定义目标元素的高亮样式。
HTML 结构：
立即学习“前端免费学习笔记（深入）”；
<h2 id="intro">简介</h2>
<p>这里是简介内容...</p>
<p><h2 id="setup">安装步骤</h2>
<p>这里是安装说明...</p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/ai/1002" title="Text-To-Song"><img
src="https://img.php.cn/upload/ai_manual/001/503/042/68b6ce21112db363.png" alt="Text-To-Song" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/ai/1002" title="Text-To-Song">Text-To-Song</a>
<p>免费的实时语音转换器和调制器</p>
</div>
<a href="/ai/1002" title="Text-To-Song" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div></p><p><a href="#intro">跳转到简介</a>
<a href="#setup">跳转到安装步骤</a>
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;
}
当用户点击指向某个 section 的链接时，其内部的 hidden-content 会显示出来。
注意事项与兼容性
虽然 :target 功能简洁有效，但使用时需注意以下几点：
- 必须确保 HTML 中存在与哈希值匹配的 ID，ID 不能重复
- 不支持低版本 IE（IE8 及以下）
- 无法监听状态变化，复杂交互仍需 JavaScript 配合
- 页面加载时若已有 hash，:target 立即生效
基本上就这些。合理使用 :target 能提升用户体验，尤其适合文档、帮助页面等静态内容的锚点增强。不复杂但容易忽略的小技巧。
