本文介绍一种不依赖 JavaScript 的纯 CSS 方案，通过调整 HTML 结构与巧妙运用 :target 伪类及兄弟选择器，实现点击锚点链接后仅显示目标区块、同时隐藏其余所有内容（包括原始链接本身）。
本文介绍一种不依赖 javascript 的纯 css 方案，通过调整 html 结构与巧妙运用 `:target` 伪类及兄弟选择器，实现点击锚点链接后仅显示目标区块、同时隐藏其余所有内容（包括原始链接本身）。
传统基于 :target 的单页导航常面临一个痛点：目标内容虽能显示，但触发链接仍保留在页面顶部，影响视觉一致性。原方案中 <a> 标签与目标 <div> 分离，导致无法用 CSS 直接控制链接的显隐——因为 CSS 无法向上选择父级或前序兄弟元素。
核心思路是重构 HTML，将每个锚点链接嵌入其对应的目标容器内，使链接成为目标元素的子元素，从而可通过 .page:target a 精准隐藏它；再利用 ~（通用兄弟选择器）配合 :not(.page:target) 隐藏所有非目标容器，彻底清理页面干扰项。
✅ 正确的 HTML 结构如下：
<div id="a" class="page"> <a href="#a">a</a> <div class="content">this is a id</div> </div> <div id="b" class="page"> <a href="#b">b</a> <div class="content">this is b id</div> </div> <div id="c" class="page"> <a href="#c">c</a> <div class="content">this is c id</div> </div>
? 对应 CSS（关键逻辑已加注释）：
立即学习“前端免费学习笔记（深入）”；
.page {
display: inline-block; /* 保证容器可被 ~ 选择器识别为兄弟 */
}
.content {
display: none;
}
/* 隐藏所有非当前目标的 .page 容器（即其他全部内容） */
.page:target ~ :not(.page:target) {
display: none;
}
/* 隐藏当前目标容器内的链接（即点击后自身消失） */
.page:target a {
display: none;
}
/* 显示当前目标容器内的实际内容 */
.page:target > .content {
display: block;
}⚠️ 注意事项：
- ~ 选择器要求元素处于同一层级且后续位置，因此 .page 必须按顺序平铺，不可嵌套；
- 所有 .page 元素需为块级或 inline-block，否则 display: none 可能失效；
- 此方案完全零 JS，兼容现代浏览器（Chrome/Firefox/Safari/Edge ≥ 12），但不支持 IE ≤ 11；
- 若需默认显示首个区块（如加载时显示 #a），可添加 #a:target, #a:not(:target) 初始样式，或借助 URL 哈希初始化。
该方法以语义化结构和标准 CSS 特性达成“一键聚焦+全局净化”效果，兼顾性能、可维护性与无障碍访问基础（屏幕阅读器仍可读取隐藏内容，如需增强可补充 aria-hidden 属性）。
