最直接原因是目标元素未设置id或id值与URL片段不完全一致（大小写、符号等必须严格匹配），:target只认id且要求DOM已挂载、无重复id，优先级等同class易被覆盖，需注意DOM顺序及fixed header遮挡问题。
为什么点击锚点后目标元素没高亮
最直接的原因是目标元素压根没写 id，或者 id 值和 URL 中 # 后面的片段不完全一致——大小写、连字符、下划线、空格都必须一模一样。比如 URL 是 #FAQ-2，但元素写的是 id="faq-2"，:target 就不会生效。
:target 只认 id，class、name、data-id 全无效。动态渲染（React/Vue）时若 DOM 里还没挂载该 id 元素，自然也匹配不到。
- 用浏览器开发者工具检查该元素的 Computed Styles，看
:target规则是否被应用（没被划掉） - 临时加一句
:target { outline: 2px solid red !important; }测试是否命中——比背景色更可靠，不受父级overflow或透明背景干扰 - 确保页面中没有重复
id，否则行为不可预测，浏览器只认第一个
:target 样式被覆盖或不生效怎么办
:target 的选择器优先级等同于一个 class（specificity 是 0,1,0），很容易被更具体的规则压住。比如写了 div:target { background: yellow; }，但页面已有 .content div { background: white; }，高亮就看不见。
- 避免宽泛选择器如
div:target，改用语义明确的h2:target或加作用域如#article h2:target - 检查目标元素是否有内联样式（如
style="background: #fff"），它优先级高于:target -
:target作用在锚点指向的元素上，不是它后面的内容——别写成:target + p期望高亮段落，除非那个p真是紧邻的下一个兄弟
如何让多个不同 hash 都高亮同一个目标元素
原生 :target 只能匹配一个元素，但你可以用通用兄弟选择器 ~ 把多个锚点和同一目标关联起来。前提是：所有锚点元素（比如 <a href="#sun"></a>）必须出现在目标元素之前，且同级（在同一父容器下）。
立即学习“前端免费学习笔记（深入）”；
- 写法是
:target ~ h1——表示“任意被激活的:target元素之后出现的所有<h1>” - 如果目标被包在
<section>里，就得写成:target ~ section > h1 - 加
:target:not(a) { outline: none; }防止空锚点自身加outline，影响可访问性和布局
滚动后目标被 fixed header 挡住怎么调
:target 本身不控制滚动位置，浏览器默认把目标元素顶到视口顶部。如果页面有 position: fixed 的导航栏，就会遮住内容。
- 给目标元素加
scroll-margin-top，例如h2:target { scroll-margin-top: 60px; } - iOS Safari ≤15.4 对
scroll-margin-top支持不稳定，可改用padding-top: 60px+margin-top: -60px模拟偏移 - 配合
html { scroll-behavior: smooth; }实现平滑滚动，两者互不冲突
真正容易被忽略的是 DOM 顺序——~ 选择器依赖锚点在前、目标在后的结构，一旦嵌套层级变深或顺序错乱，整个高亮逻辑就失效了。
