:target伪类可自动高亮URL fragment匹配的id元素，无需JS；前提为id与href严格一致（大小写、符号均需匹配），且DOM已挂载、无重复id、优先级足够，并用scroll-margin-top或::before避fixed遮挡。
点击链接后如何让目标元素自动高亮
用 :target 伪类就能做到，它会在 URL 的 fragment（即 #xxx 部分）匹配到对应 id 元素时生效。不需要监听 hashchange、也不用写 JS 绑定 class —— 浏览器原生支持，兼容性到 IE9+。
关键前提是：目标元素必须有 id，且链接的 href 值严格对应（比如 href="#section2" → <div id="section2">）。大小写、空格、特殊字符都必须一致。<h3>:target 样式为什么没生效</h3>
<p>常见失效原因不是语法错，而是语义或结构问题：</p>
<ul>
<li>
<code>id 值含非法字符（如空格、中文、点号），浏览器可能静默忽略匹配 —— 只用字母、数字、下划线、短横线
#xxx，但对应 id 元素尚未渲染（例如在 Vue/React 的异步组件里）—— :target 不会重触发，只响应初始状态.content h2 比 h2:target 优先级高）—— 加 !important 是临时解法，推荐提升选择器特异性，如 h2[id]:target
display: none 的目标元素 —— :target 仍匹配，但视觉不可见；若想“显示+高亮”，得额外加 display: block
怎样避免滚动后高亮被遮挡
锚点跳转默认滚动到元素顶部，但固定头部（position: fixed）常把目标内容盖住。纯 CSS 解法是用滚动偏移：
立即学习“前端免费学习笔记（深入）”；
/* 在目标元素前插入带 height 的空伪元素 */
:target::before {
content: "";
display: block;
height: 60px; /* 等于 header 高度 */
margin-top: -60px;
visibility: hidden;
}这个技巧依赖 ::before 的文档流占位和负 margin 拉回位置，不干扰布局，也无需 JS 计算 offsetTop。
能否对多个元素同时应用 :target 效果
不能 —— :target 每次只匹配一个元素（URL 中只能有一个 fragment）。但可以曲线实现“多区域高亮”：
- 用多个独立锚点链接分别指向不同
id，各自定义:target样式 - 如果需要“同一链接触发多个高亮”，得靠 JS；CSS 无原生方案
- 注意：若页面存在多个相同
id（HTML 非法但偶有发生），:target行为未定义，多数浏览器只匹配第一个
真正容易被忽略的是 fragment 的生命周期 —— 它不会因为用户滚动而消失，也不会因 JS 修改 location.hash 而自动更新样式（除非触发导航）。所以别指望它做动态交互反馈，它只忠于当前 URL 的 hash 值。
