:target 是匹配 url 片段标识符对应元素的伪类，仅适用于单页静态锚点跳转与样式响应；它不触发事件、不改历史、无逻辑控制，仅响应 url 变化并应用 css 样式。
伪类 :target 是什么，它真能替代 JS 做内锚切换？
能，但只在「单页静态锚点跳转 + 样式响应」场景下成立。:target 匹配 URL 中 # 后的片段标识符所对应的元素，浏览器原生支持，无需 JS。但它不触发事件、不改变历史记录、不支持条件逻辑——比如“点击后才显示内容”这种交互，它做不到；它只负责“当前 URL 有 #section2，就把 id="section2" 的元素高亮或展开”。
:target 触发时，哪些样式可以安全用？哪些会失效？
可安全使用的：display、opacity、transform、background-color、outline 等常规属性。失效的典型情况：display: none → display: block 切换常被忽略，因为 :target 不改变 DOM 结构，如果元素初始是 display: none，且父容器也限制了渲染（比如 overflow: hidden 或 height: 0），光靠 :target 拉不出来。
- 推荐用
opacity: 0+visibility: hidden替代display: none，再用:target恢复 - 避免依赖
:target触发transition到height: auto，CSS 无法过渡到auto - 若需滚动到目标位置，
scroll-margin-top可微调偏移，比 JS 的scrollIntoView更轻量
为什么点击链接后没反应？常见配置错误清单
不是语法错，而是 HTML 和 CSS 协同出问题。最常卡在这几个点：
-
<a href="#faq1">常见问题</a>对应的元素必须是<div id="faq1">...</div>，不能是class="faq1"或name="faq1"（后者仅对<a name></a>有效，已废弃） - CSS 中写成
div:target但实际元素是<section id="faq1"></section>，应改为section:target或更稳妥的[id="faq1"]:target - 使用了
!important覆盖:target样式，导致表现不一致 - URL 带查询参数如
?v=2#faq1，部分旧版 Safari 对含?的:target支持不稳定
和 JS 实现比，:target 在真实项目里适合用在哪？
适合「内容即路由」的极简场景：文档侧边栏导航、FAQ 折叠面板、单页简历的章节高亮。不适合需要状态保持（比如多个面板同时展开）、URL 同步更新（如 SPA 路由）、或服务端渲染首屏 SEO 强依赖的场景。
立即学习“前端免费学习笔记（深入）”；
- SEO 友好：搜索引擎能抓取所有
id锚点对应的内容，不用等 JS 注入 - 无 JS 降级自然：禁用 JS 时，点击仍能跳转并应用样式
- 注意 history.pushState 会破坏
:target，因为 URL 改变但未触发 hashchange —— 这时候就得切回 JS 方案
真正麻烦的是混合使用：一边用 :target 控制显隐，一边又用 JS 绑定 click 监听并 preventDefault，结果样式不触发、JS 也不执行，连调试都难定位。
