:target伪类可高亮锚点元素，通过ID匹配URL中的片段标识，实现无需JavaScript的交互效果。点击指向#section1的链接时，对应div应用黄色背景与边框，提升定位可视性；为增强可读性，建议采用顶部边框、阴影或缩放动画等柔和方式突出目标，如设置border-top和transform配合transition实现平滑过渡；还可结合display属性控制内容显隐，.hidden-content初始隐藏，:target状态下显示，适用于无JS的手风琴或标签页；该特性轻量实用，广泛用于文档、帮助页或FAQ中优化导航体验。
当页面中某个元素的 ID 与 URL 中的锚点（即 # 后面的部分）匹配时，CSS 的 :target 伪类就会生效。这个特性可以用来实现锚点跳转后高亮目标元素，比如改变背景色、边框或显示隐藏内容，无需 JavaScript 就能完成简单的交互效果。
使用 :target 高亮锚点元素
:target 选择器会选中当前被锚点指向的元素。你可以利用它来临时改变该元素的样式，让用户清楚地知道跳转到了哪个部分。
例如，点击一个指向 #section1 的链接：
<a href="#section1">跳转到第一节</a><div id="section1">这里是第一节内容</div>
通过以下 CSS 让被锚点定位的元素背景变黄：
立即学习“前端免费学习笔记（深入）”；
:target {background-color: yellow;
padding: 10px;
border: 2px solid orange;
}
当用户点击链接跳转到 #section1 时，该 div 会立即获得黄色背景和橙色边框，视觉上非常清晰。
增强可读性的高亮方式
直接设置背景色可能影响原有设计，可以通过更柔和的方式突出目标元素：
- 添加顶部边框或底部阴影，避免覆盖原有背景图或文字颜色
- 使用过渡动画让高亮更自然
- 短暂闪烁后恢复，适合长时间内容中的定位提示
示例：给目标元素加一个醒目的上边框并轻微放大
:target {border-top: 4px solid #007acc;
transform: scale(1.02);
transition: all 0.3s ease;
}
配合 display 实现内容展开
:target 不仅可用于高亮，还能控制元素显示。常用于制作无 JS 的手风琴或标签页。
初始隐藏某些内容，仅在锚点命中时显示：
.hidden-content {display: none;
}
.hidden-content:target {
display: block;
background: #f0f8ff;
padding: 15px;
}
这样点击 <a href="#tips"> 时，id 为 "tips" 且带 .hidden-content 类的元素就会显示出来。
基本上就这些。:target 是一个轻量又实用的 CSS 特性，特别适合文档、帮助页面或 FAQ 中提升导航体验。不复杂但容易忽略。
