CSS如何为目标锚点设置高亮样式_使用:target伪类定位当前模块-css教程-PHP中文网

用 :target 伪类可让锚点跳转后目标元素自动高亮，它仅匹配 URL hash 与元素 id 完全一致的元素，需注意优先级、可见性、scroll-margin 偏移及 IE 兼容性问题。

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

锚点跳转后怎么让目标元素自动高亮

用 :target 伪类最直接，浏览器原生支持，不用 JS 监听或操作 DOM。它只匹配 URL 中 # 后面的片段（fragment）恰好等于元素 id 的那个元素。

常见错误是以为 class 或 data 属性也能触发 —— 不行，:target 只认 id。比如 URL 是 #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 更可靠
注意：若目标元素是  标签自身（比如 回到顶部），:target 会作用在它身上，不是它指向的下一个元素

如何让高亮更友好（滚动偏移、过渡、兼容性）
原生 :target 不控制滚动行为，跳转后元素会紧贴视口顶部，常被 fixed header 挡住。这不是 :target 的问题，而是 scroll margin 的事。
CSS scroll-margin-top 是解法，但它和 :target 是配合关系，不是替代关系。另外，:target 本身不支持 transition，但你可以给它的子元素或伪元素加动画。

											
												
												
													CSS工具箱(专业版)
													全功能 CSS 工程手册，覆盖性能优化、无障碍、设计系统与跨浏览器兼容。
												
												下载
												
											
										

给目标元素加 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 只能定位到目标内容块，无法反向影响导航菜单里的对应  标签（比如让它变 active）。导航项高亮得靠 JS 读取 location.hash，再匹配并添加 class。
有人试图用 a[href="..."]:target，但这是错的 —— :target 匹配的是被跳转到的元素，不是触发跳转的链接本身。

导航高亮必须 JS 驱动，:target 不参与
如果只是想点击导航后内容区高亮，那 :target 管内容区就够了，和导航样式无关
注意 hashchange 事件监听时机：首次加载时也要检查 location.hash，否则刷新页面后高亮丢失

真正麻烦的是 scroll-margin 兼容性和 IE fallback 的取舍，很多人卡在这儿不是不会写 :target，而是没意识到滚动偏移和历史状态要分开处理。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索前端的入门与实战技巧！