最常见原因是目标元素缺少id属性或id值与URL片段不完全一致（大小写、符号等必须严格匹配），且:target只认id，不认class、name等；动态渲染时若DOM中无对应id则无效。
为什么点击锚点链接后元素没高亮
最常见原因是目标元素压根没有 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; }，高亮就看不见。
- 提升 specificity：改用
#section-2:target或article h2:target，避免泛泛的div:target - 别依赖
!important，尤其在组件化 CSS 场景下，后续维护会很麻烦 - 检查是否目标元素本身有内联样式（如
style="background: #fff"），它优先级高于:target - 注意
:target作用在锚点指向的元素上，不是它后面的内容——别写成:target + p期望高亮段落，除非那个p真是紧邻的下一个兄弟
怎么让多个不同 hash 都高亮同一个目标元素
原生 :target 只能匹配一个元素，但你可以用通用兄弟选择器 ~ 把多个锚点和同一目标关联起来。前提是：所有锚点元素（比如 <a id="sun"></a>、<span id="hot"></span>）必须出现在目标元素之前，且同级（在同一父容器下）。
立即学习“前端免费学习笔记（深入）”；
- 写法是：
:target ~ h1—— 表示“任意被激活的:target元素之后出现的所有<h1>” - 目标元素必须是
<h1>，不能写成:target ~ .section-title，因为~不支持 class 选择器跨层级匹配 - 如果目标被包在
<section>里，就得写成:target ~ section > h1 - 加
:target:not(a) { outline: none; }防止空锚点自身加 outline，影响可访问性和布局
滚动后目标被 fixed header 挡住怎么调
:target 本身不控制滚动位置，它只是样式响应器。浏览器默认把目标元素顶到视口顶部，如果页面有 position: fixed 的导航栏，就会遮住内容。
-
scroll-margin-top必须直接写在目标元素上，不是写在:target规则里。比如h1:target { scroll-margin-top: 64px; }是错的；正确写法是h1 { scroll-margin-top: 64px; } - 值推荐设为 fixed header 的高度（像素或 rem），不要用百分比
- 若目标元素是空标签（如
<span id="top"></span>），记得给它设display: block和最小高度，否则scroll-margin-top可能无效 - SPA 场景下（React Router / Vue Router），hash 改变可能不触发
:target计算，需手动执行一次location.hash = location.hash强制刷新
scroll-margin-top 的作用对象——它不在 :target 规则里，而在目标元素自身样式中。 
