:target 无法在 SPA 中直接实现楼层导航高亮，因框架用 pushState 不触发 hash 变化，需确保 URL 真正更新、DOM 已挂载、ID 合法且 html 设置 scroll-behavior: smooth。
:target 本身不能直接实现单页应用（SPA）中的楼层导航高亮，因为 React/Vue 等框架默认用 pushState 改 URL，不触发原生 hash 导航，:target 就不会激活。
为什么点击导航没高亮、也没平滑滚动？
根本不是 CSS 写错了，而是框架路由没真正更新 location.hash —— 比如调用 router.push("/#about") 后，window.location.hash 仍是空字符串，:target 完全收不到信号。同时，scroll-behavior: smooth 必须写在 html 上才生效，写在 body 或 section 上无效。
- 检查浏览器地址栏：点击导航后，URL 是否真的变成
https://site.com/#about？如果不是，:target 不可能匹配 - 打开开发者工具 → Elements → 找到
<section id="about">，手动在控制台执行window.location.hash = "#about"，看样式是否立刻生效 - 确认 CSS 中有
html { scroll-behavior: smooth; }，且没有被其他规则覆盖（可用 computed 样式验证）
如何让 :target 在 React/Vue 里真正工作？
最轻量的做法是绕过框架路由，直接操作 hash；若必须用 pushState，就得补 JS 兜底。
- 导航链接改用原生
<a href="#about">关于</a>，点击时触发浏览器原生 hash 跳转 → 自动激活:target+ 平滑滚动 - 如果要用
useNavigate或this.$router.push，必须显式设置 hash：navigate("/#about", { replace: true })，再加一句window.location.hash = "#about" - 目标元素需已挂载：若
id="about"的<section>在useEffect或onMounted里才渲染，而 hash 已存在，:target 会错过 —— 应确保 DOM 渲染完成后再设 hash，或用setTimeout(() => { window.location.hash = "#about" }, 0)微任务延迟
:target 高亮动画怎么写才不卡顿？
:target 是瞬时状态，不能靠 transition 过渡，必须用 @keyframes；且动画属性选错会触发重排，尤其在移动端明显卡顿。
立即学习“前端免费学习笔记（深入）”；
- 别写
section:target { transition: background-color 0.3s; }—— 没初始态，过渡无效 - 正确写法是提前定义基础样式，再用动画：
section { transition: transform 0.3s, opacity 0.3s; } section:target { animation: highlight 0.4s ease-out; } @keyframes highlight { 0% { transform: scale(0.98); opacity: 0.7; } 100% { transform: scale(1); opacity: 1; } } - 避免对
height、margin、padding动画；iOS Safari 对transform+opacity兼容性最好 - 动画时间控制在
0.3s–0.45s，超过0.5s用户会觉得响应滞后
导航项高亮为什么总对不上？
:target 只作用于被跳转到的 id 元素（比如 <section id="about">），**不是**作用于导航链接本身。想让对应 <a> 高亮，CSS 无法“反向选择”，必须结构配合或 JS 补位。
- 纯 CSS 方案：把导航项和目标区块包进同一容器，例如
<div><a href="#about">关于</a><section id="about"></section></div>，再写section:target ~ a或section:target + a - 更可靠方案：监听
hashchange事件，用 JS 给对应<a href="#about">添加active类 —— 不依赖 DOM 顺序，支持默认高亮，兼容前进/后退 - ID 值必须合法：
id="user.profile"中的点号会让 :target 失效，应改为id="user-profile"
真正麻烦的不是写几行 CSS，而是确保 hash 更新、DOM 存在、ID 合法、滚动行为开启这四件事同时成立；漏掉任意一环，:target 就静默失效——它不报错，也不警告，只安静地什么也不做。
