: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;
}
注意几点：
Wechat Article Html
下载
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
-
scroll-margin-top是关键，避免标题被固定导航栏遮挡；IE 不支持，但现代浏览器（Chrome 50+、Firefox 4+、Safari 5.1+）都 OK - 不能链式写，比如
section:target h2是合法的，但section:target.active无效——一个元素不可能同时满足:target和自定义类被“激活”（除非 JS 手动加类） - 它只响应 URL 中显式变化的锚点（如点击
<a href="#faq"></a>），不会因history.pushState或scrollIntoView自动触发
和 JavaScript 配合弥补局限性
:target 无法监听锚点变化事件，也不能在无刷新跳转后主动触发样式。这时候得靠 JS 补位：
- 监听
hashchange事件，在回调里手动给目标元素加类（比如is-targeted），再用 CSS 控制样式 - 对单页应用（如 React/Vue），路由切换不一定改
location.hash，此时:target完全失效，必须用框架的生命周期钩子 + 类名控制 - 若需过渡动画（比如淡入），
:target本身不支持transition，得靠 JS 添加类并配合transition声明
别忘了可访问性和滚动行为
纯 CSS 的 :target 高亮不等于可用的导航体验。用户可能用键盘 Tab 切换、屏幕阅读器朗读，或依赖平滑滚动：
- 确保所有锚点链接有明确文本（避免
<a href="#contact"></a>这种空链接） - 添加
scroll-behavior: smooth到html或body，让原生锚点跳转更友好 - 如果用了
scroll-margin-top，记得测试不同视口高度下的定位精度，尤其在移动端小屏上容易偏移
真正难的不是写出高亮样式，而是让这个高亮在各种跳转方式、各种设备、各种辅助技术下都稳定生效。CSS 伪类只是起点，不是终点。
