本文介绍一种不依赖 JavaScript 的纯 CSS 方案，通过调整 HTML 结构与巧妙运用 :target 伪类及兄弟选择器，实现点击锚点链接后仅显示目标区块、同时隐藏其余所有内容（包括原始链接本身）。

本文介绍一种不依赖 javascript 的纯 css 方案，通过调整 html 结构与巧妙运用 `:target` 伪类及兄弟选择器，实现点击锚点链接后仅显示目标区块、同时隐藏其余所有内容（包括原始链接本身）。

传统基于 :target 的单页导航常面临一个痛点：目标内容虽能显示，但触发链接仍保留在页面顶部，影响视觉一致性。原方案中 标签与目标

分离，导致无法用 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（关键逻辑已加注释）：

CSS婚礼策划服务机构宣传网站模板

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 属性）。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！