:target是css中唯一响应url片段标识符（如#section1）变化的伪类，它不改变原生锚点跳转行为，仅在匹配元素时激活样式，作为状态指示器实现高亮、位移等视觉反馈，需配合transition和scroll-behavior等属性达成动画与平滑滚动效果。
什么是 :target 伪类，它和普通锚点跳转有什么区别
:target 是 CSS 中唯一能响应 URL 片段标识符（即 #section1 这种）变化的伪类。它不改变跳转行为本身，只在元素被 URL 片段匹配时“激活”样式——也就是说，浏览器原生的锚点跳转依然发生，但你可以用它来触发过渡、位移、高亮等视觉反馈。
关键点在于：:target 不会阻止页面滚动，也不会替代 scrollIntoView()；它只是个“状态指示器”。如果你期望平滑滚动 + 动画高亮，得配合 scroll-behavior: smooth 和过渡属性一起用。
常见误区是以为加了 :target { opacity: 0; animation: fadeIn 0.3s; } 就能自动淡入目标块——其实不会，因为跳转瞬间元素已渲染完成，:target 状态是“瞬时生效”，没有前后状态差，纯 CSS 动画往往不触发。
如何让 :target 触发可见的进入动画
要让动画真正跑起来，必须制造一个“从无到有”的视觉差。最可靠的做法是：利用 transition 配合属性重置，而不是依赖一次性 animation。
- 给目标元素设默认状态（如
transform: translateY(10px); opacity: 0;）
- 在
:target 中覆盖为终态（如 transform: translateY(0); opacity: 1;）
- 确保该元素有
transition: transform 0.4s ease, opacity 0.4s ease;
- 注意：必须提前声明 transition，不能只写在
:target 里，否则初始状态无过渡
section {
transition: transform 0.4s ease, opacity 0.4s ease;
transform: translateY(10px);
opacity: 0;
}
section:target {
transform: translateY(0);
opacity: 1;
}
transform: translateY(10px); opacity: 0;）:target 中覆盖为终态（如 transform: translateY(0); opacity: 1;）transition: transform 0.4s ease, opacity 0.4s ease;
:target 里，否则初始状态无过渡这样当 URL 变成 #contact，<section id="contact"></section> 瞬间匹配 :target，CSS 引擎检测到属性值变化，就会执行过渡。
为什么点击链接后动画没反应？几个高频踩坑点
-
元素未设置 height 或 overflow: hidden：如果目标块内容塌陷（比如只有 inline 元素），
transform 可能不可见；加 min-height: 1px 或 display: block 确保渲染盒存在
-
transition 写在 :target 里而非基础选择器中：例如
section:target { transition: ...; } 是无效的，因为 transition 必须作用于“变化发生前”的状态
-
URL 片段带空格或特殊字符未编码：如
#产品介绍 应为 #%E4%BA%A7%E5%93%81%E4%BB%8B%E7%BB%8D，否则无法匹配 :target
-
目标元素被其他样式强制覆盖：比如父级有
overflow: hidden 剪裁了 transform 位移，或 z-index 导致视觉层叠异常
配合 scroll-behavior 实现更自然的体验
scroll-behavior: smooth 是现代浏览器支持的原生滚动平滑开关，它和 :target 完全正交，但组合使用效果最佳。
html {
scroll-behavior: smooth;
}
transform 可能不可见；加 min-height: 1px 或 display: block 确保渲染盒存在section:target { transition: ...; } 是无效的，因为 transition 必须作用于“变化发生前”的状态#产品介绍 应为 #%E4%BA%A7%E5%93%81%E4%BB%8B%E7%BB%8D，否则无法匹配 :target
overflow: hidden 剪裁了 transform 位移，或 z-index 导致视觉层叠异常scroll-behavior: smooth 是现代浏览器支持的原生滚动平滑开关，它和 :target 完全正交，但组合使用效果最佳。
html {
scroll-behavior: smooth;
}
注意两点：
- 它只对
a[href^="#"]跳转和scrollIntoView({ behavior: 'smooth' })生效，不影响 JS 手动window.scrollTo() - 如果同时用了
:target过渡，建议把过渡时长控制在0.3s–0.45s，避免和滚动动画不同步造成“先滚后动”或“动完再滚”的割裂感
:target 的能力边界很清晰：它不是 JS，不能监听、不能延迟、不能条件判断。所有“复杂逻辑”（比如跳转后自动收起导航栏、记录埋点、兼容旧版 IE）都得靠 JS 补足。单纯想加个轻量高亮或位移动画，它足够好用——前提是别指望它做超出 CSS 状态机制的事。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
