:target 伪类高亮失效最常见原因是目标元素缺少对应 id 或 id 不匹配，且仅识别 id 属性；其次 CSS 优先级覆盖、IE 不兼容、无法响应 pushState/scrollIntoView、不支持 transition 等限制需 JS 补位。
为什么 :target 有时不触发高亮
最常见原因是目标元素缺少对应 id，或 id 与 URL 中的锚点值不一致。比如访问 #section2，但页面里只有 class="section2" 而没有 id="section2"。注意：:target 只匹配 id，不认 name 或 data- 属性。
另一个容易忽略的点是 CSS 优先级——如果其他样式（比如 .active 类）设置了更高权重的 color 或 background，:target 的声明会被覆盖。建议用浏览器开发者工具检查计算样式，确认 :target 规则是否被应用。
:target 的基础写法和兼容性
它是个伪类，直接作用于被 URL 锚点定位到的元素。写法很简单：
section:target {
background-color: #f0f9ff;
padding: 2rem 0;
scroll-margin-top: 60px;
}
注意几点：
-
scroll-margin-top是关键，避免标题被固定导航栏遮挡；IE 不支持，但现代浏览器（Chrome 50+、Firefox 4+、Safari 5.1+）都 OK - 不能链式写，比如
section:target h2是合法的，但section:target.active无效——一个元素不可能同时满足:target和自定义类被“激活”（除非 JS 手动加类） - 它只响应 URL 中显式变化的锚点（如点击
这种空链接） - 添加
history.pushState到scrollIntoView或:target，让原生锚点跳转更友好 - 如果用了
hashchange，记得测试不同视口高度下的定位精度，尤其在移动端小屏上容易偏移
真正难的不是写出高亮样式，而是让这个高亮在各种跳转方式、各种设备、各种辅助技术下都稳定生效。CSS 伪类只是起点，不是终点。
