CSS如何为目标锚点设置高亮样式_使用-target伪类定位当前模块

用 :target 伪类可让锚点跳转后目标元素自动高亮，它仅匹配 URL hash 与元素 id 完全一致的元素，需注意优先级、可见性、scroll-margin 偏移及 IE 兼容性问题。锚点跳转后怎么让目标元素自动高亮用 :target 伪类最直接，浏览器原生支持，不用 JS 监听或操作 DOM。它只匹配 URL 中 # 后面的片段（fragment）恰好等于元素 id 的那个元素。常见错误是以为 class 或 data 属性也能触发 ------ 不行，:target 只认 id。比如 URL 是 #section2，页面里必须有 <div id="section2">，写成 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 id="top">回到顶部</a>），:target 会作用在它身上，不是它指向的下一个元素如何让高亮更友好（滚动偏移、过渡、兼容性）原生 :target 不控制滚动行为，跳转后元素会紧贴视口顶部，常被 fixed header 挡住。这不是 :target 的问题，而是 scroll margin 的事。 Vozo Vozo是一款强大的AI视频编辑工具，可以帮助用户轻松重写、配音和编辑视频。