使用CSS实现单选按钮点击激活颜色变更，现有代码不生效求助

问题根因排查 #

1. CSS选择器逻辑错误：你写的.switch-input:checked .switch-label是匹配.switch-input的后代.switch-label，但实际HTML结构里<input>是<label class="switch-label">的子元素，CSS无法通过子元素状态反向选中父元素，所以这条规则完全不生效。
2. 相邻选择器使用错误：.switch-input:checked+.switch-label-off是想匹配input后面相邻的label，但input本身在label内部，不存在相邻的label元素，所以色块偏移的规则也失效。
3. 定位上下文缺失：.switch-selection使用了绝对定位，但它的父容器.case-switch没有设置position: relative，导致色块的定位基准是整个页面，位置会出现异常偏移。
4. 尺寸不匹配：.switch-selection的宽度、高度和label的尺寸不对应，会出现色块覆盖不全或者溢出的问题。

修正方案 #

方案1：使用CSS :has选择器（支持现代浏览器） #

只需调整CSS代码即可，原有HTML和JS逻辑无需改动：

/* 新增父容器相对定位，作为色块的定位上下文 */
.case-switch {
  position: relative;
  height: 40px;
  width: 130px;
}
.switch-label {
  position: relative;
  width: 65px;
  float: left;
  line-height: 40px;
  font-size: 16px;
  font-weight: 900;
  text-align: center;
  cursor: pointer;
  color: #051326;
  z-index: 2;
  transition: color 0.15s ease-out;
}

.switch-input {
  display: none;
}

/* 匹配包含checked状态input的label */
.switch-label:has(.switch-input:checked) {
  color: #fff;
}

/* 匹配选中off选项时的色块偏移 */
.switch-label:has(.switch-input:checked[data-ref="off"]) ~ .switch-selection {
  left: 65px;
}

.switch-selection {
  display: flex;
  position: absolute;
  left: 0;
  width: 65px;
  height: 40px;
  border-radius: 4px;
  color: #fff;
  z-index: 1;
  transition: left 0.15s ease-out;
}

.case-switch .switch-selection {
  background-color: red;
}

方案2：兼容旧浏览器（无需:has选择器） #

需要调整HTML结构，把input移到label外部，用for和id关联，同时调整对应CSS选择器即可：

调整后的HTML代码

<div class="case-inner-info">
  <div class="case-switch-wrap">
    <div class="inner_div">
      <div class="case-info" data-ref="on">
        <p> Paragrapgh1</p>
      </div>
      <div class="case-code-wrap" style="display: none;" data-ref="off">
        <p> Paragrapgh2</p>
      </div>
    </div>
    <div class="case-switch">
      <input type="radio" id="switch-on" class="switch-input" name="switch-toggle" data-ref="on" checked>
      <label class="switch-label switch-label-on" for="switch-on">On</label>
      <input type="radio" id="switch-off" class="switch-input" name="switch-toggle" data-ref="off">
      <label class="switch-label switch-label-off" for="switch-off">Off</label>
      <span class="switch-selection"></span>
    </div>
  </div>
</div>

调整后的对应CSS代码

.case-switch {
  position: relative;
  height: 40px;
  width: 130px;
}
.switch-label {
  position: relative;
  width: 65px;
  float: left;
  line-height: 40px;
  font-size: 16px;
  font-weight: 900;
  text-align: center;
  cursor: pointer;
  color: #051326;
  z-index: 2;
  transition: color 0.15s ease-out;
}

.switch-input {
  display: none;
}

.switch-input:checked + .switch-label {
  color: #fff;
}

#switch-off:checked ~ .switch-selection {
  left: 65px;
}

.switch-selection {
  display: flex;
  position: absolute;
  left: 0;
  width: 65px;
  height: 40px;
  border-radius: 4px;
  color: #fff;
  z-index: 1;
  transition: left 0.15s ease-out;
}

.case-switch .switch-selection {
  background-color: red;
}

原有JS代码逻辑无需修改，可正常运行。

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