纯CSS实现：#radio-1-label内图片随#radio-2/3选中切换

解决方案思路 #

由于CSS选择器仅能选中同级或后代元素，因此需要调整HTML结构，将单选框移至与.bar同级的位置，这样就能通过:checked状态结合通用兄弟选择器~，控制顶部图片的显示状态。

修改后的HTML代码 #

<body>
    <div class="container">
        <!-- 将所有单选框移到最顶部，作为.bar和.tab-parent的同级元素 -->
        <input type="radio" id="radio-1" name="tabs" checked>
        <input type="radio" id="radio-2" name="tabs">
        <input type="radio" id="radio-3" name="tabs">

        <div class="bar">
            <!-- 用背景图实现切换，无需额外img标签 -->
            <label class="tab-heading radio-1-label" for="radio-1"></label>         
        </div>

        <div class="tab-parent">
            <div class="tab">
                <div class="tab-content" id="tab-one">           
                    <p>I am one.</p>
                </div>
            </div>

            <div class="tab">
                <div class="tab-content" id="tab-two">
                    <p>I am two.</p>
                </div>
            </div>

            <div class="tab">
                <label class="tab-heading" for="radio-3"><h4>Info</h4></label>
                <div class="tab-content" id="tab-three">
                    <p>I am three.</p>
                </div>
            </div>
        </div>
    </div>
</body>

调整后的CSS代码 #

div.tabs-parent {
  width: 100%;
  position: relative;
  height: 400px;
}

/* 隐藏单选框，仅通过label触发 */
input[type="radio"] {
  display: none;
}

div.tab-content {
  display: none;
  position: absolute;
  left: 0;
  top: 33px;
  background-color: #005377;
  z-index: 1;
  padding: 15px;
  width: 100%;
  box-sizing: border-box;
  height: 100%;
  overflow: auto;
}

label.tab-heading {
  position: relative;
  background-color: #3f2073;
  text-align: center;
  cursor: pointer;
  width: 150px;
  float: left;
  z-index: 2;
}

label.tab-heading h4 {
  margin: 0;
  padding: 5px 10px;
}

label.tab-heading:hover {
  background-color: #4ea5d9;
}

label.tab-heading#radio-2-label {
  border-left: 2px solid #1f0053;
  border-right: 2px solid #1f0053;
}

/* 选中tab时切换对应内容显示 */
#radio-1:checked ~ .tab-parent #tab-one,
#radio-2:checked ~ .tab-parent #tab-two,
#radio-3:checked ~ .tab-parent #tab-three {
  display: block;
}

/* 选中radio-3时切换对应label背景色 */
#radio-3:checked ~ .tab-parent label[for="radio-3"] {
  background-color: #005377;
}

/* 顶部图片切换核心规则 */
.radio-1-label {
  /* 设置默认图片，替换为你的IMAGE1路径 */
  background-image: url('IMAGE1');
  background-size: cover;
  background-position: center;
  /* 根据你的图片尺寸设置宽高 */
  width: 60px;
  height: 33px;
}

/* 当radio-2或radio-3选中时，切换顶部图片 */
#radio-2:checked ~ .bar .radio-1-label,
#radio-3:checked ~ .bar .radio-1-label {
  background-image: url('IMAGE2');
}

方案说明 #

1. 结构调整：将单选框移至.container最顶部，使其与.bar同级，确保CSS能通过~选择器关联选中状态与顶部元素。
2. 图片切换：利用label的背景图实现切换逻辑，默认显示IMAGE1；当radio-2或radio-3被选中时，自动替换为IMAGE2。若偏好使用img标签，也可在label内放置两张img，通过display: none/block控制显示状态。
3. 兼容性：纯CSS实现，无需JavaScript，兼容所有支持CSS3选择器的现代浏览器。

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