锚点链接 href 必须带 # 前缀，id 值须与 href 后字符串严格一致（大小写、符号、非数字开头），目标元素需在初始 DOM 中存在，:target 权重等同 class 易被覆盖，单页应用中建议用 JS 控制样式。
锚点链接的 href 值是否带了正确 # 前缀
常见错误是写成 href="section1" 而不是 href="#section1"。CSS 的 :target 只匹配 URL 中实际被 hash 导航到的元素，必须靠 # 触发浏览器跳转行为。如果漏掉 #，点击后 URL 不变，:target 永远不会激活。
id 属性值是否和 href 后的字符串完全一致
大小写、空格、特殊字符都必须严格匹配。比如链接是 动态插入的元素（例如通过 JavaScript 添加）若未在初始 DOM 中存在，首次加载时 立即学习“前端免费学习笔记（深入）”； 那么即使 有些场景下，比如单页应用路由接管了 hash，或者用了 href="#FAQ-2"，那对应元素就得是 id="faq-2" 或 id="FAQ_2"。HTML 中 id 是区分大小写的，且不允许以数字开头（如 id="1section" 在部分旧浏览器中可能失效）。目标元素是否真实存在于当前 HTML 文档中
:target 无法生效——因为浏览器解析 URL hash 并尝试定位是在 DOM 构建完成时进行的。解决办法包括：
hashchange 事件并手动添加高亮 classid 写在 Vue/React 的临时节点上（如 或 Fragment），它们不生成真实 DOM 元素CSS 选择器优先级是否被覆盖
:target 的权重等同于一个 class 选择器（0,1,0），很容易被更具体的选择器压过。比如你写了：section:target { background: yellow; }
#my-section { background: white; }#my-section 正好是 :target 元素，也会显示白色背景。检查方式：
:target 规则是否被划掉section:target, #my-section:target 或加 !important（仅调试用）* { background: none; }）中无差别覆盖scroll-behavior: smooth 但未等待滚动完成就触发样式计算，:target 的表现会延迟甚至失效。这时候别硬调 CSS，直接用 JS 控制 class 更可靠。
