用 :target 伪类可让锚点跳转后目标元素自动高亮，它仅匹配 URL hash 与元素 id 完全一致的元素，需注意优先级、可见性、scroll-margin 偏移及 IE 兼容性问题。
锚点跳转后怎么让目标元素自动高亮
用 :target 伪类最直接，浏览器原生支持，不用 JS 监听或操作 DOM。它只匹配 URL 中 # 后面的片段（fragment）恰好等于元素 id 的那个元素。
常见错误是以为 class 或 data 属性也能触发 —— 不行，:target 只认 id。比如 URL 是 #section2，页面里必须有 <div id="section2">，写成 <code>class="section2" 或 data-id="section2" 都无效。
- 确保目标元素有
id，且值与 URL 中的 hash 完全一致（区分大小写） - 避免多个元素用同一个
id，否则行为不可预期 -
:target在页面加载或 hash 变更时自动生效，无需额外事件绑定
:target 样式为什么没生效
最常踩的坑是 CSS 优先级或样式被覆盖。比如你写了 div:target { background: yellow; }，但 div 本身有 background: white 内联样式，或者被更具体的规则（如 .content div { background: #fff; }）压住了。
另一个隐蔽问题是元素不可见区域导致“高亮看不见”：如果目标元素是空的、高度为 0、或被 overflow: hidden 截断，高亮可能根本看不到。
立即学习“前端免费学习笔记（深入）”；
- 用浏览器开发者工具检查 computed styles，确认
:target规则是否被应用、是否被覆盖 - 临时加个
outline: 2px solid red测试是否命中，比 background 更可靠 - 注意：若目标元素是
<a></a>标签自身（比如<a id="top">回到顶部</a>），:target会作用在它身上，不是它指向的下一个元素
如何让高亮更友好（滚动偏移、过渡、兼容性）
原生 :target 不控制滚动行为，跳转后元素会紧贴视口顶部，常被 fixed header 挡住。这不是 :target 的问题，而是 scroll margin 的事。
CSS scroll-margin-top 是解法，但它和 :target 是配合关系，不是替代关系。另外，:target 本身不支持 transition，但你可以给它的子元素或伪元素加动画。
- 给目标元素加
scroll-margin-top: 60px（值按 header 高度调整），解决被遮挡 - 想加淡入效果？不能直接
transition: background，但可以:target::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255,255,0,0.2); transition: opacity 0.3s; } - IE 完全不支持
:target，需要 fallback 方案（比如 JS 判断location.hash并手动加 class）
能不能用 :target 做单页路由高亮导航项
不能直接做。:target 只能定位到目标内容块，无法反向影响导航菜单里的对应 <a></a> 标签（比如让它变 active）。导航项高亮得靠 JS 读取 location.hash，再匹配并添加 class。
有人试图用 a[href="..."]:target，但这是错的 —— :target 匹配的是被跳转到的元素，不是触发跳转的链接本身。
- 导航高亮必须 JS 驱动，
:target不参与 - 如果只是想点击导航后内容区高亮，那
:target管内容区就够了，和导航样式无关 - 注意 hashchange 事件监听时机：首次加载时也要检查
location.hash，否则刷新页面后高亮丢失
真正麻烦的是 scroll-margin 兼容性和 IE fallback 的取舍，很多人卡在这儿不是不会写 :target，而是没意识到滚动偏移和历史状态要分开处理。
