基于纯CSS图片画廊：为选中大图添加标题的技术问询

我基于纯CSS实现了一个图片画廊（点击图片可居中放大），现有代码结构如下：

HTML结构：

<input class='gallery__select' type='radio' name='gallery-select' id='0' checked='checked' />

<div class='gallery'>
  <label class='gallery__item' for='0'><img src='urlXXX'/></label>
</div>

CSS样式：

.gallery__item {
  cursor: pointer;
  border-radius: 5px;
  grid-row: span 1;
  grid-column: span 1;
  transition: transform 0.1s ease-in-out;
}

.gallery__select:nth-of-type(1):checked ~ .gallery .gallery__item:nth-of-type(1) {
  cursor: default;
  display: grid;
  align-items: center;
  grid-row: 1/-1;
  grid-column: 3;
}

现在需要给每个图片添加标题，要求仅当图片被选中（居中放大状态）时显示标题，小图状态隐藏标题，尝试添加<span>标签后找不到合适的CSS选择器实现需求：

<div class='gallery'>
  <label class='gallery__item' for='0'><img src='urlXXX'/></label>
  <span>text</span>
</div>

解决方案：调整DOM结构+关联选择器实现 #

1. 调整HTML结构，将标题嵌套进对应图片的容器

把标题<span>放到对应图片的label标签内，让标题和图片的选中状态直接关联：

<input class='gallery__select' type='radio' name='gallery-select' id='0' checked='checked' />
<input class='gallery__select' type='radio' name='gallery-select' id='1' />

<div class='gallery'>
  <label class='gallery__item' for='0'>
    <img src='urlXXX'/>
    <span class='gallery__title'>图片标题1</span>
  </label>
  <label class='gallery__item' for='1'>
    <img src='urlYYY'/>
    <span class='gallery__title'>图片标题2</span>
  </label>
</div>

2. 编写CSS控制标题显示逻辑

• 默认隐藏所有标题
• 当对应单选框被选中时，显示该图片的标题

/* 默认隐藏所有标题 */
.gallery__title {
  display: none;
  /* 自定义标题样式 */
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  padding: 4px 12px;
  background: rgba(0,0,0,0.7);
  color: white;
  border-radius: 4px;
}

/* 小图状态基础样式，为标题绝对定位提供参考 */
.gallery__item {
  cursor: pointer;
  border-radius: 5px;
  grid-row: span 1;
  grid-column: span 1;
  transition: transform 0.1s ease-in-out;
  position: relative;
}

/* 选中状态的大图样式保留 */
.gallery__select:nth-of-type(1):checked ~ .gallery .gallery__item:nth-of-type(1),
.gallery__select:nth-of-type(2):checked ~ .gallery .gallery__item:nth-of-type(2) {
  cursor: default;
  display: grid;
  align-items: center;
  grid-row: 1/-1;
  grid-column: 3;
}

/* 仅在图片选中时显示对应标题 */
.gallery__select:nth-of-type(1):checked ~ .gallery .gallery__item:nth-of-type(1) .gallery__title,
.gallery__select:nth-of-type(2):checked ~ .gallery .gallery__item:nth-of-type(2) .gallery__title {
  display: block;
}

批量优化（多图片场景）

如果画廊有大量图片，可使用通用选择器减少重复代码：

/* 匹配所有选中状态的大图 */
.gallery__select:checked ~ .gallery .gallery__item:nth-of-type(n) {
  cursor: default;
  display: grid;
  align-items: center;
  grid-row: 1/-1;
  grid-column: 3;
}

/* 显示对应选中大图的标题 */
.gallery__select:checked ~ .gallery .gallery__item:nth-of-type(n) .gallery__title {
  display: block;
}

注意：确保每个单选框的nth-of-type序号和对应.gallery__item的序号完全一致。

核心原理 #

利用CSS的兄弟选择器（~）和后代选择器，当单选框处于checked状态时，定位到对应的图片容器，再控制其内部的标题元素显示。将标题嵌套进label内，避免了DOM层级导致的选择器失效问题，实现了选中状态与标题显示的关联。

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