:target 是 css 伪类，用于选中 url 片段标识符对应的元素。结合 ::before 可在锚点跳转时插入提示内容，如“? 您正在查看这里”，通过高亮样式提供视觉反馈。示例中，.highlight:target::before 添加醒目提示块，增强单页或 faq 页面的定位体验。需注意布局影响、可访问性及旧版 ie 不兼容问题。
使用 :target 伪类结合 ::before 伪元素，可以实现一种简单的页面提示效果，特别适用于锚点跳转时的视觉反馈。比如当用户点击某个链接跳转到页面特定区域时，通过高亮或显示提示文字提醒当前定位的位置。
:target 是什么？
:target 是一个 CSS 伪类，用于匹配当前 URL 中片段标识符（即 # 后面的部分）所指向的元素。例如，URL 为
page.html#section1时，ID 为
section1的元素就会被 :target 选中。
::before 配合显示提示
利用 ::before 伪元素，可以在目标元素前插入内容，比如“您已到达此处”之类的提示信息，增强用户体验。
示例代码：
立即学习“前端免费学习笔记（深入）”；
.highlight:target::before {
content: "? 您正在查看这里";
display: block;
background-color: #ffeb3b;
padding: 8px;
margin-bottom: 10px;
font-weight: bold;
color: #333;
border-radius: 4px;
}
HTML 结构示例：
I-Shop购物系统
下载
部分功能简介：商品收藏夹功能热门商品最新商品分级价格功能自选风格打印结算页面内部短信箱商品评论增加上一商品，下一商品功能增强商家提示功能友情链接用户在线统计用户来访统计用户来访信息用户积分功能广告设置用户组分类邮件系统后台实现更新用户数据系统图片设置模板管理CSS风格管理申诉内容过滤功能用户注册过滤特征字符IP库管理及来访限制及管理压缩，恢复，备份数据库功能上传文件管理商品类别管理商品添加/修改/
<h2 id="section1" class="highlight">第一部分</h2> <p>这里是第一部分内容...</p> <p><a href="#section1">跳转到第一部分</a></p>
当用户点击链接跳转至
#section1时，
:target生效，
::before插入提示语，并以醒目样式展示。
实用场景与注意事项
这种技巧适合帮助用户确认跳转位置，尤其在单页文档或 FAQ 页面中非常有用。
- 确保插入的内容不影响原有布局，建议使用
display: block
或position
控制位置 - 可配合过渡动画提升体验，如淡入效果
- 注意屏幕阅读器等辅助工具对伪元素内容的支持有限，关键信息不应只依赖伪元素呈现
- 旧版 IE 不支持 :target，需考虑兼容性需求
基本上就这些，不复杂但容易忽略细节。
