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