怎样用纯 CSS 实现点击锚点显示对应内容并自动隐藏其他元素及触发链接

作者：袖梨 2026-06-20

通过调整 HTML 结构与巧妙运用 :target 伪类配合兄弟选择器，可在不依赖 JavaScript 的前提下，实现点击锚点显示目标区块、隐藏其余所有内容（包括触发用的 <a> 标签）的效果。

通过调整 html 结构与巧妙运用 `:target` 伪类配合兄弟选择器，可在不依赖 javascript 的前提下，实现点击锚点显示目标区块、隐藏其余所有内容（包括触发用的 `` 标签）的效果。

要达成“点击链接显示对应内容，同时隐藏自身及其他所有非目标元素”的效果，关键在于改变 DOM 结构逻辑——将锚点 <a> 放入目标 <div> 内部，并利用 CSS 的 :target 伪类与相邻/后续兄弟选择器（如 ~ 和 >）进行精准控制。

✅ 推荐结构：语义化 + 可控性更强

<div id="a" class="page">  <a href="https://www.php.cn/link/0361f1baaa8ed070dfe62ae2245bcbed">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 驱动显示/隐藏逻辑

.page {  display: inline-block; /* 保持块级行为，避免换行干扰 */}.content {  display: none;}/* 当前目标页显示其 content，隐藏自身 anchor */.page:target > .content {  display: block;}.page:target > a {  display: none;}/* 隐藏所有非目标 .page 元素（及其子元素） */.page:target ~ :not(.page:target) {  display: none;}

⚠️ 注意事项：

:target ~ :not(.page:target) 依赖兄弟关系，因此所有 .page 必须处于同一层级且顺序排列；

此方案完全无需 JavaScript，兼容现代浏览器（IE9+），性能更优、语义更清晰；

若需支持返回时恢复锚点链接可见，可添加 :target ~ .page > a { display: inline; } 等回退样式，但本例聚焦“单页切换”场景，以简洁为目标。

? 扩展建议（可选增强）

添加 CSS 过渡动画提升体验：

.content {  opacity: 0;  transform: translateY(10px);  transition: opacity 0.3s ease, transform 0.3s ease;}.page:target > .content {  opacity: 1;  transform: translateY(0);}