:target伪类可选中URL片段对应的元素并为其添加高亮样式，如改变背景色、边框和添加阴影，结合transition实现平滑动画，提升锚点跳转的视觉反馈与用户体验。
当用户点击页面内的锚点链接跳转到指定元素时，可以通过CSS的 :target 伪类来高亮显示该元素。这个方法无需JavaScript，纯CSS即可实现视觉反馈，提升用户体验。
:target 是一个CSS伪类，用于匹配当前URL片段标识符（即#后面的ID）所指向的元素。例如，当浏览器地址为 page.html#section1 时，ID为 section1 的元素就会被 :target 选中。
你可以结合 :target 改变目标元素的背景色、边框、内边距等样式，使其在页面中更醒目。
立即学习“前端免费学习笔记（深入）”；
示例HTML结构：
<nav> <a href="#step1">步骤一</a> <a href="#step2">步骤二</a> <a href="#step3">步骤三</a> </nav> <p><section id="step1"> <h2>步骤一：准备材料</h2> <p>这里是第一步的内容...</p> </section></p><p><section id="step2"> <h2>步骤二：开始制作</h2> <p>这里是第二步的内容...</p> </section></p><p><section id="step3"> <h2>步骤三：完成检查</h2> <p>这里是第三步的内容...</p> </section></p>
对应的CSS样式：
/* 默认样式 */
section {
padding: 20px;
margin: 10px 0;
border: 2px solid #ddd;
background-color: #f9f9f9;
transition: all 0.3s ease;
}
<p>/<em> 当该section成为目标时的高亮样式 </em>/
section:target {
background-color: #ffeb3b;
border-color: #ff8f00;
box-shadow: 0 0 10px rgba(255, 143, 0, 0.4);
transform: scale(1.02);
}</p>scroll-behavior: smooth 可让跳转更自然。transition 让背景或边框变化更柔和。你还可以结合其他选择器增强效果，比如只对标题应用高亮：
section:target h2 {
background: #ff6f00;
color: white;
padding: 10px;
display: inline-block;
}
基本上就这些 —— 使用 :target 实现锚点高亮简单高效，适合文档、帮助页、表单步骤等场景，不复杂但容易忽略的小技巧。
以上就是如何在CSS中使用伪类:target实现锚点跳转高亮_结合:target改变背景和边框的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
142
收藏
