html { scroll-behavior: smooth; } 必须作用于 html 元素才可靠生效，写在 body 上在 Safari（尤其 iOS 16+ 前）会失效；需配合 scroll-margin-top 解决固定头部遮挡，并确保 id 合法、目标已渲染且 URL hash 同步。
html { scroll-behavior: smooth } 必须写在 html 上
平滑滚动不是 :target 的能力，而是浏览器原生滚动行为开关。只写 body { scroll-behavior: smooth; } 在 Chrome/Firefox 可能凑效，但在 Safari（尤其是 iOS 16+ 之前）会失效；必须作用于 html 元素才可靠。旧版 Safari 还需同时加 html, body { scroll-behavior: smooth; } 才稳定。
常见错误是把这行 CSS 写在组件级样式或 scoped style 里，结果被覆盖或未生效；建议统一放在全局基础 CSS 文件最顶部，或 <style> 标签内直接写在 html 选择器下。
:target 匹配失败的三个高频原因
不是 CSS 写错了，而是 DOM 或 URL 没对上：
-
id值含点号（.）、冒号（:）或中文——CSS 中无法转义，:target不支持，必须改用连字符或下划线，如id="user-profile"而非id="user.profile" - 目标元素是异步挂载的（React 的
useEffect、Vue 的onMounted后才插入），但 URL 已带#faq—— 浏览器找不到对应id，:target永远不触发 - 框架路由用了
history.pushState()或router.push("/page#section2")，但没同步更新location.hash，导致 hashchange 事件未触发，:target失效
fixed 导航栏遮挡目标元素怎么调
浏览器默认把 :target 元素顶到视口顶部，如果页面有 position: fixed 的 header，内容就会被盖住。解决方式不是给 body 或 html 加 padding-top，而是直接在目标元素上设置：
立即学习“前端免费学习笔记（深入）”；
h2:target {
scroll-margin-top: 64px;
}
这个值应 ≈ 固定头部高度（单位 px/rem/em 均可）。注意：scroll-margin-top 只在 :target 元素上生效，且必须配合 scroll-behavior: smooth 才能自然生效；写在父容器或通用选择器上无效。
想加入场动画？transition 必须提前声明
:target 是瞬时状态切换，没有“中间态”，所以不能只在 :target 规则里写 transition：
- ❌ 错误：
section:target { opacity: 1; transition: opacity 0.3s; } - ✅ 正确：基础样式就定义过渡，
:target只负责终态：section { opacity: 0; transform: translateY(10px); transition: opacity 0.3s, transform 0.3s; } section:target { opacity: 1; transform: translateY(0); }
另外，避免用 display: none → display: block 切换，它会触发回流、无法过渡、布局抖动；改用 visibility + opacity + transform 组合更稳妥。
