CSS伪类:target如何实现锚点高亮_使用:target改变目标元素背景或边框

:target伪类可高亮锚点元素，通过ID匹配URL中的片段标识，实现无需JavaScript的交互效果。点击指向#section1的链接时，对应div应用黄色背景与边框，提升定位可视性；为增强可读性，建议采用顶部边框、阴影或缩放动画等柔和方式突出目标，如设置border-top和transform配合transition实现平滑过渡；还可结合display属性控制内容显隐，.hidden-content初始隐藏，:target状态下显示，适用于无JS的手风琴或标签页；该特性轻量实用，广泛用于文档、帮助页或FAQ中优化导航体验。

当页面中某个元素的 ID 与 URL 中的锚点（即 # 后面的部分）匹配时，CSS 的 :target 伪类就会生效。这个特性可以用来实现锚点跳转后高亮目标元素，比如改变背景色、边框或显示隐藏内容，无需 JavaScript 就能完成简单的交互效果。

使用 :target 高亮锚点元素

:target 选择器会选中当前被锚点指向的元素。你可以利用它来临时改变该元素的样式，让用户清楚地知道跳转到了哪个部分。

例如，点击一个指向 #section1 的链接：

通过以下 CSS 让被锚点定位的元素背景变黄：

立即学习“前端免费学习笔记（深入）”；

当用户点击链接跳转到 #section1 时，该 div 会立即获得黄色背景和橙色边框，视觉上非常清晰。

增强可读性的高亮方式

直接设置背景色可能影响原有设计，可以通过更柔和的方式突出目标元素：

Hot Tattoo AI

人工智能纹身生成器，提供独特的纹身创意

52

查看详情

• 添加顶部边框或底部阴影，避免覆盖原有背景图或文字颜色
• 使用过渡动画让高亮更自然
• 短暂闪烁后恢复，适合长时间内容中的定位提示

示例：给目标元素加一个醒目的上边框并轻微放大

配合 display 实现内容展开

:target 不仅可用于高亮，还能控制元素显示。常用于制作无 JS 的手风琴或标签页。

初始隐藏某些内容，仅在锚点命中时显示：

这样点击 <a href="#tips"> 时，id 为 "tips" 且带 .hidden-content 类的元素就会显示出来。

基本上就这些。:target 是一个轻量又实用的 CSS 特性，特别适合文档、帮助页面或 FAQ 中提升导航体验。不复杂但容易忽略。

以上就是CSS伪类:target如何实现锚点高亮_使用:target改变目标元素背景或边框的详细内容，更多请关注php中文网其它相关文章！