radio单选按钮选中后label标签背景色CSS样式不生效问题

核心问题根源 #

CSS的相邻兄弟选择器+、通用兄弟选择器~，只能选中位于当前元素后方的同级元素，无法选中前方的同级元素，更无法选中父级元素，这是两次尝试都失效的核心原因。

第一种方案（label在前、input在后）问题修复 #

失效原因 #

DOM结构中<label>写在<input>前面，input:checked+label的逻辑是“找到选中的input，再选它后面紧挨着的label”，但label实际在input前面，选择器完全匹配不到目标。
另外input和label中间加了<br>标签，就算调换两者顺序，+选择器要求两个元素必须紧紧相邻、中间无其他节点，br的存在也会导致匹配失败。
同时用display: none隐藏单选按钮，会导致按钮无法被键盘聚焦、读屏软件无法识别，存在无障碍访问缺陷。

正确实现代码 #

调整DOM顺序把input放到label前面，用~通用兄弟选择器匹配（不受中间br标签影响），换用不影响无障碍的方式隐藏原生单选按钮：

/* 隐藏原生单选按钮，保留无障碍访问能力 */
.ans{
  position: absolute;
  opacity: 0;
}
/* 匹配选中radio后方的对应label */
.answer input[type="radio"]:checked ~ .ans-list{
  background-color: #FFA500;
}

.ans-list{
  border-style:solid;
  border-width:thin;
  margin:20% auto;
  width:50%;
  cursor: pointer;
}
.ans-list:hover{
  background-color:#D6D5A8;
  color:black;
}

<div class="answer an1">
  <input type="radio" name="q1" class="ans false" id="ans1">
  <label class="ans-list" for="ans1">1</label>
  <br>
  <input type="radio" name="q1" class="ans true" id="ans2">
  <label class="ans-list" for="ans2">4</label>
  <br>
  <input type="radio" name="q1" class="ans false" id="ans3">
  <label class="ans-list" for="ans3">3</label>
  <br>
  <input type="radio" name="q1" class="ans false" id="ans4">
  <label class="ans-list" for="ans4">2</label>
  <br>
  <button type="submit" name="Submit" class="submit">Submit</button>
  <button type="button" class="next hide" name="next">Next</button>
</div>

第二种方案（input嵌套在label内部）问题修复 #

失效原因 #

这种结构下input是label的子元素，不是同级元素，+选择器只能匹配同级节点，根本无法选中作为父元素的label，自然不会有样式生效。

正确实现代码 #

嵌套结构下直接用:has()伪类，匹配“内部包含选中radio”的label即可，所有现代浏览器均已支持该属性。如果需要兼容IE等极老旧浏览器，把结构改成上面第一种的input、label同级形式即可。

label{
  display:block;
  margin: 1rem auto;
  border-style:solid;
  width:50%;
  cursor: pointer;
  padding: 0.5rem;
}
/* 匹配内部有选中radio的label */
label:has(input[type="radio"]:checked){
  background-color:red;
  color: #fff;
}
.ans{
  margin-right: 0.5rem;
}

<label for="choice1"> <input type="radio" id="choice1" class="ans" name="op" checked="checked">male</label>
<label for="choice2"> <input type="radio" id="choice2" class="ans" name="op">female</label>
<label for="choice3"> <input type="radio" id="choice3" class="ans" name="op">other</label>

选择器使用备忘 #

• A + B：仅匹配紧接在A之后的同级B元素，中间不能插入任何其他元素节点
• A ~ B：匹配A后方所有符合条件的同级B元素，中间允许存在其他节点
• 两个兄弟选择器都无法匹配A元素前方的同级元素，CSS目前没有原生前置兄弟选择器
• 需要根据子元素状态匹配父元素时，使用:has()伪类实现

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