如何利用:target伪类同时隐藏和显示不同div/元素？

云原生阿岚

2026-7-23

实现带URL Target的元素切换显示

首先明确：HTML中ID是唯一标识，不能给多个元素设置相同的id，这违反规范，浏览器只会识别第一个匹配的ID元素，这也是你之前方案失效的核心原因。

以下是两种可行的实现方法，均符合规范且能满足需求：

方法1：兄弟元素切换（元素在同一父级）

适合两个元素相邻或处于同一父容器下的场景：

HTML 代码

<!-- 触发链接，指向目标元素ID -->
<a href="#targeturl">切换显示状态</a>

<!-- 默认状态：显示元素A，隐藏目标元素 -->
<div class="element-to-hide">这是默认显示的元素，点击链接后会隐藏</div>
<div id="targeturl" style="display: none;">这是默认隐藏的元素，点击链接后会显示</div>

CSS 代码

/* 当targeturl被URL触发时，显示它 */
#targeturl:target {
  display: block !important;
}

/* 同时隐藏同级的另一个元素（通用兄弟选择器~，适用于任意位置的同级元素） */
#targeturl:target ~ .element-to-hide {
  display: none;
}

如果两个元素顺序相反（目标元素在前面），可以用**相邻兄弟选择器+**替换~，精准选择紧挨着的下一个元素。

方法2：父容器控制（元素层级复杂时）

如果两个元素不在同一层级，可借助父容器的:target状态统一控制子元素：

HTML 代码

<a href="#switch-container">切换元素</a>

<div id="switch-container">
  <div class="default-show">默认显示，点击后隐藏</div>
  <div class="default-hide" style="display: none;">默认隐藏，点击后显示</div>
</div>

CSS 代码

/* 父容器被触发时，隐藏默认显示的子元素 */
#switch-container:target .default-show {
  display: none;
}

/* 父容器被触发时，显示默认隐藏的子元素 */
#switch-container:target .default-hide {
  display: block;
}