单选按钮选中后无法触发对应CSS样式该如何解决

问题根因 #

你写的选中状态样式使用了+相邻兄弟选择器，要求<input>和<label>是同级相邻的节点，但你的HTML结构里<input>是直接嵌套在<label>内部的，二者不是同级关系，所以选择器匹配不到对应元素，样式无法生效。

解决方法 #

有两种可选用的修改方案：

方案1：修改HTML结构（兼容性最好）

将<input>从<label>内部挪到外面，和<label>保持同级，原有CSS不需要改动即可生效，修改后的HTML代码如下：

<div class="fieldWrapper poller-nature-radio">
  <label for="id_poller_nature_0">选中后无变化:</label>
  <ul id="id_poller_nature">
<li>
    <input type="radio" name="poller_nature" value="Choice 1" required="" id="id_poller_nature_0">
    <label for="id_poller_nature_0">问题</label>
</li>
<li>
    <input type="radio" name="poller_nature" value="Choice 2" required="" id="id_poller_nature_1">
    <label for="id_poller_nature_1">信息</label>
</li>
  </ul>
</div>

方案2：仅修改CSS选择器（不需要改动HTML）

把原有选中状态的CSS选择器替换为:has()伪类选择器，匹配内部包含选中单选框的<label>元素，修改后的CSS代码如下：

/* 替换你原代码中最后一段选中样式的规则 */
#id_poller_nature label:has(input[type="radio"]:checked) {
    background-color:#bfb;
    border-color: #4c4;
}

注意：:has()选择器在Chrome 105+、Firefox 121+、Safari 15.4+版本支持，如果你需要兼容更低版本浏览器，推荐使用方案1。

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