:target伪类失效主因是目标元素缺失id或id值与URL片段不严格一致；它仅匹配带对应id的唯一元素，不支持name、class等其他属性，且id区分大小写、需匹配解码后字符。
锚点定位失效：:target 选不到元素？
根本原因是目标元素缺少 id，或 id 值与 URL 中的片段（#xxx）不严格一致。:target 只匹配当前 URL 片段指向的、具有对应 id 的**唯一元素**，不认 name 属性，也不匹配 class 或其他属性。
常见错误现象：:target 样式完全没生效；控制台无报错但视觉无变化；点击链接跳转后高亮消失得过快（其实是跳转成功但样式写错了位置）。
- 必须用
id，不能用name（HTML5 已废弃a[name]锚点） -
id值区分大小写，#Section1和#section1是两个不同目标 - URL 片段中若含 URL 编码（如
#%E4%B8%AD%E6%96%87），id值也得是解码后的原始字符（即id="中文"），浏览器会自动解码匹配 - 若页面动态插入元素，需确保插入时已带正确
id，否则首次跳转可能因元素尚未存在而失焦
:target 样式写在哪？作用域和层叠要注意什么
:target 是伪类，写法和 :hover 一样，但它本身不改变文档流，只影响样式表现。最容易被忽略的是它的选择器优先级和作用范围——它只对「当前被 URL 片段选中的那个元素」生效，不是对所有可能的目标批量处理。
常见错误：给 h2:target 加背景色，但实际目标是 div；或写了 .content:target 却忘了该 div 并没有 id="content"。
立即学习“前端免费学习笔记（深入）”；
- 样式必须直接写在目标元素的选择器上，比如
#faq-3:target，不能靠父选择器“推导”（.section:target h2是无效的，因为:target不落在.section上） - 如果想同时高亮目标及其紧邻标题，可用兄弟选择器：
#step2:target ~ h3，但前提是 DOM 结构确实支持 - 动画需配合
transition写在目标元素本身上，:target触发时才开始过渡，别写在父容器 - 某些旧版 Safari 对
:target的 CSS 动画支持不稳定，建议加will-change: opacity或避免用transform起始态
URL 片段变化但 :target 不触发？检查 history.pushState 干扰
单页应用（SPA）里用 history.pushState 或路由库改 URL 时，:target 不会自动响应——它只在浏览器原生跳转（包括 a[href="#x"] 点击、地址栏回车、前进后退）时触发。JS 手动改 location.hash 一般可以，但 pushState 完全绕过锚点机制。
典型场景：Vue Router / React Router 导航到 /page#section2，但 #section2 元素没高亮。
- 纯前端路由下，
:target基本不可靠，应改用 JS 监听hashchange事件 + 手动添加 class - 如果坚持用
:target，就得让路由保持真实 hash 模式（mode: 'hash'），并确保导航最终落到location.hash变更 -
scrollIntoView()和:target无关，别指望它触发伪类；它是独立的滚动行为 - 服务端渲染（SSR）页面首次加载时，
:target能正常工作，因为 URL 是完整带 hash 的，浏览器原生解析
兼容性底线：哪些浏览器根本不认 :target
IE8 及更早版本完全不支持 :target，IE9+、Edge 12+、所有现代 Chrome/Firefox/Safari 都支持。移动端 iOS Safari 从 5.0 开始支持，Android Browser 4.0+ 支持。
如果你的项目还要兼容 IE8，就别考虑这个方案；如果只是需要优雅降级，可以加一层 JS fallback。
- 检测方式简单粗暴：
if (CSS.supports && CSS.supports(':target', 'color: red')) { /* ok */ }，但没必要——直接按需 polyfill 更实在 - 轻量 fallback：监听
hashchange，用document.getElementById(location.hash.slice(1))找到元素，加个临时 class（如is-targeted），再写.is-targeted样式 - 注意
location.hash可能为空字符串或"#"，取slice(1)前要判断 - 服务端生成静态页时，别在 HTML 里预设
is-targetedclass，那会污染初始状态；它必须由客户端运行时决定
真正麻烦的不是怎么写 :target，而是当它和 JS 路由、动态内容、无障碍焦点管理撞在一起时，谁该负责滚动、谁该负责高亮、谁该接管键盘 Tab 流——这些边界问题，文档不会告诉你。
