:target 伪类无反应的主因是目标元素缺失对应 id 或 id 值与 url 锚点不一致；须确保 id 严格匹配、区分大小写、唯一，且不依赖已失效的 name 属性。
为什么点击锚点后 :target 没反应
常见原因是目标元素缺少对应 id，或 id 值和 URL 中的锚点不一致。比如页面有 <div>内容</div>，但没写 id="section1"，而链接却是 #section1，这时 :target 完全不会匹配。
注意：:target 只匹配当前 URL 锚点（#xxx）所指向的、具有对应 id 的**唯一元素**；name 属性已失效，不能用。
- 确保每个锚点链接的
href值（如#faq）和目标元素的id（如id="faq"）**严格一致**，区分大小写 - 避免重复
id—— 浏览器只认第一个，其余被忽略 - 动态插入的元素需在插入时同步带上
id，否则即使 DOM 存在，初始 URL 带锚点也不会触发:target
:target 样式被其他规则覆盖怎么办
CSS 优先级问题很常见：:target 本身没有特殊权重，它等价于一个类选择器（.xxx），容易被更具体的选择器压住。比如 div#main h2 会盖过 h2:target 的颜色设置。
不是加 !important 就完事——那会埋下维护隐患。更稳妥的方式是提升选择器特异性。
- 把
:target和已有结构结合，例如article h2:target或#content > :target - 如果目标是滚动后高亮，别只改颜色，加个轻微背景色 + 左侧边框（
border-left: 3px solid #007bff）更易察觉 - 过渡动画要谨慎：给
:target加transition没用，因为它不是状态切换，而是“匹配/不匹配”的瞬时切换；想实现淡入效果，得配合animation或 JS 监听hashchange
滚动到 :target 区块时页面跳动或定位不准
这是最常被忽略的兼容性细节：原生锚点滚动会把目标元素**顶部对齐视口顶部**，但若页面有固定头部（position: fixed），内容就会被遮挡。
CSS 本身无法直接修正滚动偏移，但可以用 scroll-margin-top 这个现代属性精准控制目标元素与视口顶部的距离。
- 给目标元素统一加
scroll-margin-top: 60px（值等于 header 高度），滚动时自动留白 - 注意兼容性：
scroll-margin-top在 Safari 15.4+、Chrome 99+、Firefox 97+ 支持；老版本需回退到 JS 方案（监听hashchange后调用element.scrollIntoView({ block: 'start', margin: 60 })） - 不要在
:target规则里写scroll-margin-top—— 它是布局属性，不属于伪类样式作用域
如何让多个区块共享同一套高亮逻辑
比如 FAQ 页面里所有 <details></details> 或所有 <section class="question"></section> 都希望被 :target 触发高亮，但又不想逐个写 id。
本质是「语义化 + 约定优于配置」：用统一类名 + JavaScript 补足 CSS 的表达局限。
- CSS 层面仍靠
:target，所以每个区块仍需唯一id（可由 JS 自动生成，如id="q-1"、id="q-2"） - JS 只做两件事：解析
location.hash，找到对应id元素，然后给它加一个临时类（如is-targeted），再用.is-targeted写样式 —— 这样能绕过:target的单元素限制，也便于加动画 - 别忘了 history.pushState / replaceState 后手动触发 scroll 和 class 更新，否则前进/后退时高亮失效
真正麻烦的从来不是怎么高亮，而是滚动定位、焦点管理、键盘导航（tabindex）、屏幕阅读器支持这些连带问题——:target 只解决其中一环，别让它背锅。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
