咨询：仅用HTML实现点击图片切换效果（无JavaScript支持）

因为不能用JavaScript，我们可以借助CSS的:checked伪类搭配隐藏的复选框实现点击切换效果，这个方案能轻松批量扩展到大量方块。

修改后的HTML结构 #

把每个独立方块改成「隐藏复选框 + 可点击标签」的组合，用标签触发复选框状态变化：

<!DOCTYPE html>
<html>
  <head>
    <title>Image Grid</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <div class="canvas image-grid">
      <!-- 单个方块核心结构 -->
      <div class="square-wrapper">
        <input type="checkbox" id="square-1" class="square-checkbox">
        <label for="square-1" class="square"></label>
      </div>
      <div class="square-wrapper">
        <input type="checkbox" id="square-2" class="square-checkbox">
        <label for="square-2" class="square"></label>
      </div>
      <div class="square-wrapper">
        <input type="checkbox" id="square-3" class="square-checkbox">
        <label for="square-3" class="square"></label>
      </div>
      <div class="square-wrapper">
        <input type="checkbox" id="square-4" class="square-checkbox">
        <label for="square-4" class="square"></label>
      </div>
      <!-- 重复上述结构即可生成更多方块，比如你需要的7行多列 -->
    </div>
  </body>
</html>

对应CSS代码 #

通过复选框的:checked状态切换标签背景图，用网格布局实现整齐排列：

.image-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* 4列布局，可按需修改列数 */
  gap: 0; /* 方块间无间距，需要间距可调整数值 */
}

.canvas{
  width: 400px;
  height: 400px;
  border: black solid 1px;
  padding: 0;
}

/* 隐藏复选框，仅保留点击触发功能 */
.square-checkbox {
  display: none;
}

.square {
  display: block;
  width: 50px;
  height: 50px;
  background-image: url('white.jpeg');
  background-size: cover;
  cursor: pointer; /* 鼠标悬停显示手型，提示可点击 */
}

/* 复选框选中时，切换标签背景为黑色方块 */
.square-checkbox:checked + .square {
  background-image: url('black.jpeg');
}

批量实现说明 #

1. 快速扩展：只需复制<div class="square-wrapper">...</div>结构，修改每个复选框的id和对应标签的for属性保持唯一（比如square-5、square-6...），无需新增CSS规则。
2. 布局灵活：替换原来的float为grid布局，方块排列更规整，修改grid-template-columns的数值就能调整列数。
3. 状态绑定：通过+相邻兄弟选择器，把复选框选中状态和标签样式关联，实现点击切换效果。

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