:target 仅匹配 URL fragment 对应的 id 元素，非 class 或 name；SPA 中需手动触发 hash 更新或 JS 控制状态；其优先级等同 class，注意层叠与 specificity；可配合 scroll-behavior 实现平滑滚动。
锚点元素没高亮？检查 :target 是否作用在正确元素上
:target 只匹配 URL 中 # 后的 fragment identifier 对应的、具有相同 id 的元素（不是 class，也不是 name）。常见错误是给目标元素加了 class="section-1" 却指望 a[href="#section-1"] 点击后让该元素响应 :target —— 这不行，必须写 id="section-1"。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 确保链接 href 值（如
#faq）与目标元素的id完全一致（大小写敏感、无空格） - 避免重复
id，否则:target行为未定义 - 若用 Vue/React 等框架动态渲染内容，确认
id在 DOM 挂载后真实存在（不是 SSR 渲染遗漏或条件渲染未触发）
单页应用中路由跳转后 :target 不生效？Fragment 更新被拦截了
SPA 使用 history.pushState 或路由库（如 React Router v6、Vue Router）时，URL 改变但不触发页面刷新，浏览器不会自动滚动或激活 :target。这不是 CSS 问题，而是浏览器机制：只有原生 anchor 点击或 location.hash = "xxx" 才触发 :target 样式计算。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 手动触发一次 hash 设置：跳转后执行
location.hash = location.hash（或先清空再重设），强制浏览器识别 target - 在路由守卫（如
router.afterEach）中检测 hash 变化，并调用document.getElementById(hash.slice(1))?.scrollIntoView()辅助定位 - 不要依赖
:target做关键交互状态（比如选项卡激活态），改用 JS 控制 class（如is-active），:target仅作视觉增强
:target 样式被其他规则覆盖？优先级和层叠顺序要注意
:target 的优先级等同于一个 class 选择器（0,1,0），低于 ID 选择器，也低于带 !important 的声明。如果你写了 .content h2:target { color: red; } 却没生效，很可能是更早定义的 h2 { color: blue; } 或 #main h2 { color: green; } 覆盖了它。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 用浏览器开发者工具检查 computed styles，看哪条规则胜出；hover 或 focus 状态可能临时掩盖
:target - 提升 specificity：用
h2:target, h2[id]:target或加上父容器 ID，如#article h2:target - 慎用
!important，尤其在组件化 CSS 中易引发维护问题；更推荐用明确的作用域限定
需要平滑滚动 + 高亮？:target 和 scroll-behavior 可以共存
:target 本身不控制滚动行为，但可以和 scroll-behavior: smooth 配合使用。注意：该属性需写在 html 或 body 上才对锚点滚动生效；只写在目标元素上无效。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 全局启用：在 CSS 中加
html { scroll-behavior: smooth; } - 若目标元素有 padding/margin 影响定位，可配合
scroll-margin-top（如h2:target { scroll-margin-top: 60px; }）预留导航栏高度 - 旧版 Safari（scroll-margin，需用 JS fallback 或负 margin + padding 折中
真正麻烦的是异步加载内容里的锚点——目标元素可能还没渲染出来，:target 就已计算完毕。这时候只能监听 DOM 变化或用 requestAnimationFrame 延迟应用样式逻辑。
