CSS目标伪类:target应用_实现无JS的内锚点跳转切换

: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 也不执行，连调试都难定位。