CSS问题：勾选隐藏复选框时无法修改Label背景色

几年前给WooCommerce安装了一款添加产品额外选项的插件，当时调试CSS后一切正常，插件更新后出现异常。需要实现：访客点击包含隐藏复选框的label时，复选框被勾选的同时，label背景色同步改变。

当前可用的Hover/Active状态CSS #

.tm-extra-product-options .bloesems-div ul.tmcp-ul-wrap.tm-extra-product-options-checkbox li.tmcp-field-wrap .tc-label.tm-label:hover {
    background:#9FC649;
}

.tm-extra-product-options .bloesems-div ul.tmcp-ul-wrap.tm-extra-product-options-checkbox li.tmcp-field-wrap .tc-label.tm-label:active {
    background:#C6FA99;
}

插件更新前生效的CSS #

.tm-extra-product-options ul.tmcp-ul-wrap.tm-extra-product-options-checkbox li.tmcp-field-wrap label input[type="checkbox"]:checked ~ .tc-label { background: #9FC649; }

注：不清楚代码中的~作用，此为原代码写法

当前Label的HTML结构 #

<div class="tc-cell tc-col tc-element-container">
<ul class="tmcp-ul-wrap tmcp-elements tm-extra-product-options-checkbox tm-element-ul-checkbox element_0 bloesems-ul" data-rules="{"valueKBO_0":[""]}" data-original-rules="{"ValueKBO_0":[""]}" data-rulestype="{"ValueKBO_0":[""]}" data-tm-validation="[]">
        <li class="tmcp-field-wrap tc-active">
            <label class="tm-epo-field-label" for="tmcp_choice_0_0_1656df54326881">
                <input type="checkbox" id="tmcp_choice_0_0_1656df54326881" name="tmcp_checkbox_0_0" class="tmcp-field bloesems tm-epo-field tmcp-checkbox tcenabled" data-price="" data-rules="[""]" data-original-rules="[""]" data-rulestype="[""]" data-limit="" data-exactlimit="" data-minimumlimit="" data-image="" data-imagec="" data-imagep="" data-imagel="" data-image-variations="[]" value="valueKBO_0">
                <span class="tc-label-wrap">
                    <span class="tc-label tm-label">
                some text
                            </span>
                        </span>
                    </label>
            </li>
        </ul>
</div>

已尝试的调试代码 #

• 取消隐藏复选框时，这段代码可生效（验证复选框选择状态能被捕获）：

.tm-extra-product-options .bloesems-div ul.tmcp-ul-wrap.tm-extra-product-options-checkbox li.tmcp-field-wrap label input[type="checkbox"]:checked { accent-color: red; }

• 尝试用:has()选择器修改包含已勾选复选框的label背景色，但无效：

.tm-extra-product-options .tm-epo-field-label:has(input[type="checkbox"]:checked){
    background:#C6FA99;
}

解决方案 #

先解释旧代码中的~：这是CSS兄弟选择器，用于选中当前元素之后的同级元素。旧代码失效的核心原因是插件更新后HTML层级变化——原来.tc-label是复选框的直接同级，现在复选框的同级是.tc-label-wrap，.tc-label嵌套在其内部，导致兄弟选择器无法命中目标。

方法1：适配新层级的CSS选择器（兼容性好） #

通过兄弟选择器选中.tc-label-wrap，再定位内部的.tc-label：

.tm-extra-product-options .bloesems-div ul.tmcp-ul-wrap.tm-extra-product-options-checkbox li.tmcp-field-wrap label input[type="checkbox"]:checked ~ .tc-label-wrap .tc-label {
    background: #9FC649;
}

方法2：优化:has()选择器（需浏览器支持） #

原:has()代码失效大概率是选择器权重或路径问题，调整完整路径后即可生效：
如果需要给.tc-label单独变色：

.tm-extra-product-options .bloesems-div ul.tmcp-ul-wrap.tm-extra-product-options-checkbox li.tmcp-field-wrap label.tm-epo-field-label:has(input[type="checkbox"]:checked) .tc-label {
    background: #C6FA99;
}

如果需要给整个label容器变色：

.tm-extra-product-options .bloesems-div ul.tmcp-ul-wrap.tm-extra-product-options-checkbox li.tmcp-field-wrap label.tm-epo-field-label:has(input[type="checkbox"]:checked) {
    background: #C6FA99;
}

注意：:has()选择器仅支持Chrome 105+、Edge 105+、Safari 15.4+，需兼容旧浏览器优先选方法1。

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