要实现平滑滚动和正确触发:target，必须设置html { scroll-behavior: smooth; }，且ID需合法唯一、大小写敏感；目标元素应加scroll-margin-top避免被固定导航遮挡；:target动画须用@keyframes，transition无效。
必须写 html { scroll-behavior: smooth; }，否则点击锚点永远不平滑——:target 本身不控制滚动，只管样式响应。
scroll-behavior 必须作用在 html 上，写在 body 无效
浏览器的主滚动容器是 html 元素，不是 body。哪怕你给 body 加了 scroll-behavior: smooth，也完全没效果。
- ✅ 正确写法：
html { scroll-behavior: smooth; } - ⚠️ 旧版 Safari（≤15.4）需兼容写法：
html, body { scroll-behavior: smooth; } - ❌ 错误写法：
body { scroll-behavior: smooth; }（页面毫无变化） - 该属性只影响程序化滚动（如锚点跳转、
scrollIntoView()），不影响用户手动拖拽或滚轮滚动
:target 样式不生效？先查 ID 合法性与渲染时机
:target 是纯匹配机制，没有容错。URL 中的 hash 和目标元素的 id 必须严格一致，且元素必须已挂载。
- ID 不能以数字开头：
<section id="2faq">是非法的，#2faq:target永远不触发 - ID 必须全局唯一：重复 ID 会导致行为不可预测（可能匹配第一个，也可能不匹配）
- 大小写敏感、不含空格或 URL 编码字符：
#FAQ不会匹配<div id="faq"> - SPA 场景（React/Vue）中，若
id="faq"的节点在初始location.hash存在后才动态挂载，:target不会回溯激活——需确保 DOM 渲染完成后再设置 hash
固定导航栏遮挡目标？用 scroll-margin-top 调整定位偏移
平滑滚动默认把目标元素顶部对齐视口顶部，常被 position: fixed 的导航栏盖住。这不是 :target 的问题，而是定位基准没调准。
立即学习“前端免费学习笔记（深入）”；
- 给目标元素加偏移：
.content-section { scroll-margin-top: 64px; }（数值 ≈ 导航栏高度） - 移动端 iOS Safari ≤15.4 对
scroll-margin-top支持弱，可降级为：padding-top: 64px; margin-top: -64px; - 避免用
transform: translateY(-64px)等方案：它会破坏文档流，影响可访问性和其他样式计算 -
scroll-margin-top是标准解法，兼容 Chrome 69+、Firefox 68+、Safari 15.4+
:target 配动画必须用 @keyframes，transition 无效
:target 是离散状态（有 / 无），没有中间帧，所以 transition 对它不起作用。想加高亮动效，只能走 CSS 动画。
- ✅ 可行：
section:target { animation: highlight 0.4s ease-out; }+@keyframes highlight { ... } - ❌ 无效：
section:target { transition: background-color 0.3s; }（不会渐变） - 动画属性优先选
transform和opacity，避免触发布局重排（如height、margin） - 动画时长建议 ≤ 0.5s，过长会让用户觉得响应滞后
真正容易卡住的地方，是框架里动态渲染的节点还没挂载，URL hash 就已经存在了——:target 不会“回头看”，它只认当前真实存在的 DOM。
