仅用HTML/CSS开发掷骰子游戏：点击锚点无法隐藏div元素

你使用的CSS通用兄弟选择器~只能选中目标元素之后的同级元素，而#dice1在#dice2的前面，所以#dice2:target~#dice1这个选择器无法匹配到任何元素，自然无法隐藏#dice1。

推荐采用「默认隐藏所有骰子，仅显示被锚点选中的骰子」的逻辑，无需单独隐藏其他骰子，代码修改如下：

修改后的CSS #

/* 默认隐藏所有骰子 */
#dice1, #dice2, #dice3 {
  display: none;
}

/* 显示被选中的骰子1 */
#dice1:target {
  display: block;
  /* 可添加骰子1的滚动动画 */
}

/* 显示被选中的骰子2并播放动画 */
#dice2:target {
  display: block;
  animation: roll2 5s ease-in-out;
  animation-delay: 0.3s;
  animation-fill-mode: forwards;
}

/* 链接显示隐藏逻辑 */
#dice2:target~#dice2-link,
#dice2:target~#dice1-link {
  display: none;
}

#dice2:target~#dice3-link {
  display: block;
}

原HTML结构保持不变 #

你的HTML结构无需调整，继续使用原有代码即可：

<div class="container">
  <div class="dice1" id="dice1">
    <div class="face face1">
    </div>
  </div>
  <div class="dice2" id="dice2">
    <div class="face face1">
    </div>
  </div>
  <a href="#dice1" id="dice1-link">Roll Dice 1</a>
  <a href="#dice2" id="dice2-link">Roll Dice 2</a>
  <a href="#dice3" id="dice3-link">Roll Dice 3</a>
</div>

如果不想修改原有逻辑，也可以使用CSS的:has()选择器直接选中包含#dice2:target的容器内的#dice1，但该选择器在旧浏览器中不支持：

.container:has(#dice2:target) #dice1 {
  display: none;
}

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