单选按钮选中或悬停时如何修改对应外层容器样式（HTML不可修改）

原写法失效原因 #

你之前使用的兄弟选择器~只能选中当前元素之后的同级节点，而单选input是.gchoice_*容器的子元素，CSS原生没有父选择器之前无法通过子元素状态向上选中父容器，这是原写法不生效的核心原因。 #

现代浏览器实现方案（Chrome 105+/Firefox 121+/Safari 15.4+支持） #

用CSS新增的:has()伪类直接判断容器内的单选是否被选中，匹配后直接给容器本身加样式，完全不需要修改HTML结构：

/* 选中状态容器样式 */
.gchoice_1_15_0:has(#choice_1_15_0:checked),
.gchoice_1_15_1:has(#choice_1_15_1:checked) {
    background: #EF8B22;
    border: 1px solid #EF8B22;
    box-shadow: 0px 0px 6px 0px rgb(239 139 4 / 30%);
}
/* 可选：选中后文本改为白色，避免橙色背景下看不清 */
.gchoice_1_15_0:has(#choice_1_15_0:checked) label,
.gchoice_1_15_1:has(#choice_1_15_1:checked) label {
    color: #fff;
}

/* 悬停状态容器样式 */
.gchoice_1_15_0:hover,
.gchoice_1_15_1:hover {
    background: #EF8B22;
    border: 1px solid #EF8B22;
    box-shadow: 0px 0px 6px 0px rgb(239 139 4 / 30%);
}
/* 可选：悬停时文本改为白色 */
.gchoice_1_15_0:hover label,
.gchoice_1_15_1:hover label {
    color: #fff;
}

低版本浏览器兼容方案 #

如果需要兼容不支持:has()的旧浏览器，可以通过把单选input撑满整个容器，利用相邻兄弟选择器修改label样式模拟容器效果：

/* 容器加相对定位，原有样式转移到label上 */
.gchoice_1_15_0, .gchoice_1_15_1 {
    position: relative;
    background: transparent;
    border: none;
    padding: 0;
}
/* input撑满整个容器，层级调高保证点击区域全覆盖 */
.gchoice_1_15_0 input, .gchoice_1_15_1 input {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    opacity: 0;
    z-index: 9;
    cursor: pointer;
}
/* label继承原有容器的基础样式 */
.gchoice_1_15_0 label, .gchoice_1_15_1 label {
    display: block;
    width: 100%;
    color: #58595B;
    border: 1px solid #E4E4E4;
    border-radius: 10px;
    padding: 1em 0 1em 1em;
    background: #fff;
    transition: all ease-in-out .3s;
    box-shadow: none;
    margin: 0;
}
/* 选中时修改label样式 */
#choice_1_15_0:checked + label,
#choice_1_15_1:checked + label {
    background: #EF8B22;
    border: 1px solid #EF8B22;
    box-shadow: 0px 0px 6px 0px rgb(239 139 4 / 30%);
    color: #fff;
}
/* 悬停时修改label样式 */
#choice_1_15_0:hover + label,
#choice_1_15_1:hover + label {
    background: #EF8B22;
    border: 1px solid #EF8B22;
    box-shadow: 0px 0px 6px 0px rgb(239 139 4 / 30%);
    color: #fff;
}

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