:target切换区块失效的根本原因是目标元素缺少匹配的id或id与URL锚点不一致；浏览器仅识别id属性，不识别class、data-id或已废弃的name属性。
为什么 :target 切换区块时点击没反应
根本原因通常是目标元素缺少匹配的 id，或者 id 和 URL 锚点不一致。浏览器只认 id，不认 name（HTML5 已废弃 name 用于锚点）。比如链接是 #tab2，对应区块必须是 <div id="tab2">，写成 <code>class="tab2" 或 data-id="tab2" 都无效。
常见错误现象：
– 点击链接 URL 变了，但区块没显示/隐藏
– 控制台无报错，CSS 也写了，就是不生效
– 在 Vue/React 项目里完全失灵（因为路由接管了 URL，原生锚点被拦截）
- 确保所有目标元素都有唯一、合法的
id（不能以数字开头，不能含空格或特殊符号） - 链接
href值必须严格匹配，大小写敏感：#FAQ≠#faq - 如果用前端框架，
:target基本不可用——它依赖原生 URL hash 变化，而框架通常用 History API 或自定义路由，不会触发:target
:target 的样式规则怎么写才可靠
直接写 div:target { display: block; } 很危险：它会覆盖所有原本的 display 值，且无法和其它状态（比如 :hover）共存。更稳妥的方式是配合初始隐藏 + 显式显示，用属性选择器兜底。
使用场景：纯静态页、文档型页面、原型演示——不需要 JS，但要求结构简单、切换逻辑单一。
立即学习“前端免费学习笔记（深入）”；
- 初始状态统一设为
display: none，避免未激活时“闪现” - 用
:target触发display: block或opacity: 1，别只改颜色或边框，否则视觉上没变化 - 加过渡动画要小心：
display无法过渡，得改用opacity+visibility组合 - 兼容性没问题，Chrome 1+、Firefox 1.5+、Safari 1.3+、Edge 全支持，连 IE8 都行
如何让多个标签共存且互斥（类似单选）
:target 本身不提供“取消前一个”的能力，它只是响应当前 URL 锚点。所以想实现标签页效果，必须靠 CSS 层级和顺序控制——把所有可选区块包进同一个容器，用相邻兄弟选择器或通用兄弟选择器“压制”非目标项。
性能影响极小，纯 CSS，无重排；但结构耦合度高，新增 tab 要同步改 CSS 选择器。
- 把所有 tab 内容放在同一父容器内，比如
<main class="tabs"></main> - 默认隐藏全部：
.tabs > div { display: none; } - 只让目标显示：
.tabs > div:target { display: block; } - 如果想加淡入效果，改用：
.tabs > div { opacity: 0; transition: opacity 0.2s; } .tabs > div:target { opacity: 1; }
遇到 :target 和 JS 混用时的冲突点
最常踩的坑是：JS 手动修改 location.hash 后，:target 生效了，但 JS 又监听 hashchange 去操作 DOM，结果样式和 JS 状态不一致——比如 CSS 显示了 #tab3，JS 却还在操作 tab2 的数据。
这不是 bug，是职责混乱。CSS 负责呈现，JS 负责逻辑，两者不该互相覆盖状态。
- 要么全用 CSS：
:target控制显示，不写 JS 切换逻辑 - 要么全用 JS：删掉所有
:target样式，用 class 控制显隐，JS 同时更新 hash 和 DOM - 如果非要混用，JS 修改 hash 后，必须等一次渲染周期（
requestAnimationFrame）再读取:target对应元素，否则拿不到最新状态 - 注意 Safari 对快速连续 hash 变更的节流行为，可能丢掉中间态
真正麻烦的不是语法，是思维惯性——总想用 JS 补 CSS 做不到的事，但 :target 的边界很清晰：它只响应 URL，不响应点击事件、不触发回调、不维护状态。越想绕过这个限制，越容易掉坑里。
