:target样式生效但内容被遮住，是因为浏览器将目标元素顶部对齐视口顶部，而fixed导航栏占据该区域；应使用scroll-margin-top（顶部导航）或scroll-margin-bottom（底部导航）在目标元素上设置对应偏移值，严格匹配导航栏实际高度，避免用margin/padding模拟。
为什么 :target 样式生效但内容被遮住
:target 伪类本身没问题，它确实匹配了 #section2 对应的 <section id="section2">，也应用了你写的背景色或边框。问题出在浏览器滚动行为——它把目标元素**顶部对齐视口顶部**，而 position: fixed 的导航栏正占着那块区域，结果目标元素的可见部分被盖住了。
用 scroll-margin-top 修正滚动定位（推荐）
这是最直接、无需 JS 的解法，作用于目标元素自身：
-
scroll-margin-top告诉浏览器：“滚动到这个元素时，让它顶部离视口顶部留出 Xpx 空隙” - 值必须等于固定导航栏的实际高度（含
padding、border），比如60px或4rem - 写在目标选择器上，例如：
section:target { scroll-margin-top: 60px; } - 不要写在
html或body上——那是scroll-padding-top的用法，和:target场景无关 - Safari ≤15.4 不支持，可加
@supports (scroll-margin-top: 1px) { ... }安全包裹
固定底部导航栏要用 scroll-margin-bottom
如果导航栏在底部（position: fixed; bottom: 0），锚点跳转后目标元素**底部被盖住**，scroll-margin-top 没用：
- 改用
scroll-margin-bottom，例如：footer:target { scroll-margin-bottom: 80px; } - 值对应底部导航栏高度
- 同样不破坏盒模型，不影响布局流
- 别用
margin-bottom或padding-bottom模拟——它们会让元素变高，可能撑出多余滚动条
:target 高亮样式写错位置是常见坑
很多人想让导航栏里的菜单项跟着高亮，却把样式写成：nav a:target —— 这永远不生效：
立即学习“前端免费学习笔记（深入）”；
-
:target只匹配 URL 中#后的 ID 所对应的**目标元素本身**，不是链接 - 想联动导航项，必须靠 JS 监听
hashchange并手动切换.active类 - 纯 CSS 下唯一可行的是结构耦合：比如在
section#contact内部放一个.nav-link-contact，再写section#contact:target .nav-link-contact { color: blue; } - 别依赖
a[href$="#contact"]，它只在初始渲染时匹配，URL 片段变化不会重触发
真正容易被忽略的是：scroll-margin-* 的值必须严格匹配导航栏实际渲染高度，而不是设计稿标称值；响应式场景下，得配合媒体查询动态调整，否则小屏下仍会遮挡。
