纯CSS跨页锚点显示内容异常：多窗口仅显示首个内容求助

嘿，我懂你这种头疼的情况！纯CSS锚点控制显示本来就容易踩选择器的坑，你遇到的问题大概率是原方案的选择器逻辑没写对——比如用了兄弟选择器或者优先级不足的规则，导致不管点哪个锚点，第一个内容块都被误触发显示了。

下面给你一套精准的纯CSS解决方案，完全满足你“从其他页面跳转到锚点时，只显示目标内容、隐藏其余内容”的需求：

第一步：整理HTML结构 #

先确保每个内容块都有唯一的ID，锚点链接的href对应这个ID，页面其余元素（比如导航、页脚）可以单独归类：

<!-- 页面其余内容（比如导航） -->
<header class="page-header">
  <p>这是页面头部，跳转锚点后会被隐藏</p>
</header>

<!-- 锚点链接（也可以放在其他页面） -->
<div class="anchor-links">
  <a href="#firstWindow">打开第一个窗口</a>
  <a href="#secondWindow">打开第二个窗口</a>
  <a href="#thirdWindow">打开第三个窗口</a>
</div>

<!-- 目标内容块 -->
<div class="content-wrapper">
  <div class="window" id="firstWindow">
    <h2>第一个窗口内容</h2>
    <p>这是从其他页面跳转到#firstWindow时显示的内容</p>
  </div>
  <div class="window" id="secondWindow">
    <h2>第二个窗口内容</h2>
    <p>这是从其他页面跳转到#secondWindow时显示的内容</p>
  </div>
  <div class="window" id="thirdWindow">
    <h2>第三个窗口内容</h2>
    <p>这是从其他页面跳转到#thirdWindow时显示的内容</p>
  </div>
</div>

第二步：编写核心CSS规则 #

关键是用:target伪类精准匹配当前锚点对应的内容块，同时控制页面其余元素的显示/隐藏：

/* 默认状态：显示页面其余内容，隐藏所有窗口 */
.page-header, .anchor-links {
  display: block;
}
.window {
  display: none;
}

/* 当锚点匹配到某个窗口时：隐藏页面其余内容，显示目标窗口 */
body:has(.window:target) .page-header,
body:has(.window:target) .anchor-links {
  display: none;
}
.window:target {
  display: block;
  /* 可选：给显示的窗口加样式，方便区分 */
  padding: 20px;
  border: 1px solid #ccc;
}

/* 可选：默认显示第一个窗口（如果需要） */
.window:first-of-type {
  display: block;
}

为什么原来的方案会出错？ #

你之前看到的旧帖子里的方案，可能用了类似~（通用兄弟选择器）或者+（相邻兄弟选择器）的写法，这种写法对HTML结构要求极高——比如锚点元素必须和内容块是紧邻的兄弟关系，而且很容易出现优先级冲突，导致第一个内容块被错误匹配。

而上面的方案用:target直接匹配内容块的ID，逻辑清晰又精准，不管从哪个页面跳转过来，只要锚点ID对应，就只会显示目标内容。

兼容性说明 #

:has()选择器是CSS4的新特性，现代浏览器（Chrome 101+、Firefox 121+、Safari 15.4+）都支持。如果需要兼容更老的浏览器，可以把页面其余内容和窗口放在同一个父容器里，用兄弟选择器调整，但:target本身是CSS2的特性，兼容性很好。

内容的提问来源于stack exchange，提问作者Salladfingers