使用:checked伪类设置visibility为visible时元素不显示问题

问题根因 #

你使用的通用兄弟选择器~仅能匹配同一父级下的后续兄弟元素，你当前隐藏的复选框<input>是包裹在.buttonSpace容器内部的，它的兄弟节点只有对应的<label>标签，你需要控制显隐的<figure>、<p>元素和.buttonSpace是同级节点，CSS原生不支持向上查找父元素，因此你现有的选择器完全匹配不到目标元素，样式自然不生效。
另外你给.backgroundHistory相关类默认设置了visibility: visible，不符合「默认隐藏、点击后显示」的需求，需要同步修改。

修复方案 #

方案1：调整DOM结构（兼容性最好，全浏览器支持） #

将三个卡片的隐藏复选框从.buttonSpace内部移到.card的直接子节点，放在.buttonSpace之前，这样复选框和你要控制的<figure>、<p>属于同一父级下的兄弟节点，可以被~选择器正常匹配。
调整后单张卡片的HTML结构示例：

<div class="card">
  <!-- 把隐藏复选框移到此处，作为.card的直接子元素 -->
  <input type="checkbox"  id="expand-toggle">
  <div class="buttonSpace">
    <label for="expand-toggle"> <span class="buttonPicture"> "icon"</span> </label>
  </div>
  <figure id="f1">
    <img src="imgs/monaLisa.jpg" alt="Mona Lisa" class="pictureAdjustment">
    <figcaption class="imageHistory">
      <i>Leonardo da Vinci</i> (1503) <br>
    </figcaption>
  </figure>
  <p class="backgroundHistory">
    该画作创作于1503年至1519年，当时达芬奇居住在意大利佛罗伦萨。目前画作中的女性身份尚未明确，甚至有研究质疑其是否为真实女性。
  </p>
</div>

同步修改CSS的选中样式选择器，其余两个卡片的选择器按照相同规则调整即可：

/* 先修改默认隐藏样式，把文字介绍也默认隐藏 */
#f1, #f2, #f3,
.backgroundHistory, .backgroundHistory2, .backgroundHistory3{
  visibility: collapse;
}

/* 蒙娜丽莎卡片选中样式 */
#expand-toggle:checked ~ #f1,
#expand-toggle:checked ~ .backgroundHistory {
  visibility: visible;
}

/* 阿特米西亚卡片选中样式 */
#expand-toggle2:checked ~ #f2,
#expand-toggle2:checked ~ .backgroundHistory2 {
  visibility: visible;
}

/* 记忆的永恒卡片选中样式 */
#expand-toggle3:checked ~ #f3,
#expand-toggle3:checked ~ .backgroundHistory3 {
  visibility: visible;
}

方案2：使用:has()伪类（无需修改DOM，仅支持2023年后发布的现代浏览器） #

如果不需要兼容老旧浏览器，可以直接用CSS的:has()伪类实现，不需要调整原有DOM结构，直接修改CSS的选中样式即可：

/* 先修改默认隐藏样式，把文字介绍也默认隐藏 */
#f1, #f2, #f3,
.backgroundHistory, .backgroundHistory2, .backgroundHistory3{
  visibility: collapse;
}

/* 蒙娜丽莎卡片选中样式 */
.buttonSpace:has(#expand-toggle:checked) ~ #f1,
.buttonSpace:has(#expand-toggle:checked) ~ .backgroundHistory {
  visibility: visible;
}

/* 其余两张卡片的样式按照相同规则调整即可 */

优化建议 #

如果希望元素隐藏时不占据页面空间，可以把visibility: collapse替换为display: none，选中时分别给<figure>设置display: flex、给<p>设置display: block，页面布局会更合理。

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