使用 :target 伪类结合 scroll-behavior 可实现点击链接后平滑滚动并高亮目标元素，适用于锚点导航。通过设置 html { scroll-behavior: smooth; } 实现平滑滚动，:target 匹配 URL 中 fragment 对应元素，应用背景色、过渡效果等样式以提示当前激活区域。示例中点击带 #id 的链接，页面平滑滚动至对应 section，并通过 background-color 和 transition 实现视觉反馈。需确保元素 ID 唯一，避免性能影响，测试移动端兼容性，必要时用 JavaScript 监听 hashchange 事件微调滚动位置。合理运用可提升单页或文档类页面的导航体验。
当使用 CSS 的 :target 伪类与页面滚动行为结合时，可以实现点击链接后高亮或平滑展示目标元素的效果。这种组合常用于单页应用、文档锚点导航或内容展开场景中，提升用户体验。
:target 伪类的作用
:target 是一种 CSS 伪类，用于匹配当前 URL 中 fragment identifier（即 # 后面的部分）所指向的元素。
例如，当浏览器地址栏为 example.html#section1 时，ID 为 section1 的元素就会被 :target 选中，从而应用对应的样式。
常见用法包括：
立即学习“前端免费学习笔记（深入）”；
- 改变目标元素的背景色
- 调整边框或阴影以突出显示
- 控制显示/隐藏（配合 opacity 或 height）
scroll 行为控制滚动方式
通过 CSS 的 scroll-behavior 属性，可以让页面滚动更平滑，避免生硬跳转。
在根元素或 body 上设置：
html {
scroll-behavior: smooth;
}
这样，无论是用户点击锚点链接还是脚本触发滚动，都会以动画形式完成。
结合 :target 使用时，用户点击带有 #id 的链接，页面会平滑滚动到对应元素位置，并且该元素可被 :target 定义的样式高亮。
实际应用示例
以下是一个简单但实用的例子：
<style>html { scroll-behavior: smooth; }
.section {
padding: 40px 20px;
background: #f9f9f9;
margin: 10px 0;
}
.section:target {
background-color: #ffeb3b;
transition: background-color 0.5s ease;
}
</style>
<a href="#one">跳转到第一节</a>
<a href="#two">跳转到第二节</a>
<div id="one" class="section">这里是第一节内容</div>
<div id="two" class="section">这里是第二节内容</div>
点击链接后，页面平滑滚动到对应区域，同时背景变黄提示当前激活节。
注意事项与优化建议
使用 :target 和 scroll 行为时需注意以下几点：
- 确保每个目标元素有唯一 ID，否则 :target 不生效
- transition 可增强视觉反馈，但不要过度影响性能
- 移动端需测试滚动行为是否一致，某些旧版本浏览器不支持 smooth 滚动
- 若需更精细控制（如偏移定位），可用 JavaScript 监听 hashchange 事件并手动调整 scrollTop
基本上就这些。合理使用 :target 和 scroll-behavior，能让页面导航更自然直观，不复杂但容易忽略细节。}
