CSS - 标签/复选框图像替换

Question

我有以下 CSS:-

#profile-container ul label:before {
    content: "";
    display: inline-block;
    width: 33px;
    height: 33px;
    margin-right: 10px;
    position: relative;
    left: 0;
    top: 10px;
    background: url(../img/c-unchecked.png);
}

#profile-container input:checked label:before {
    background: url(../img/c-checked.png);  
}

使用以下标记:-

<ul class="acf-checkbox-list checkbox vertical">
    <li><label><input id="acf-field-interested_in" type="checkbox" class="checkbox" name="interested_in" value="permanent" checked="yes">Permanent</label></li>
    <li><label><input id="acf-field-interested_in-Temporary" type="checkbox" class="checkbox" name="interested_in" value="Temporary" checked="yes">Temporary</label></li>
    <li><label><input id="acf-field-interested_in-Interim" type="checkbox" class="checkbox" name="interested_in" value="Interim" checked="yes">Interim</label></li>
</ul>

我不明白为什么单击复选框后图像没有被替换，有什么想法吗？

Answer 1

需要注意嵌套选择器:

#profile-container input:checked label:before {

label 不在 input 内。它是 input 的父级，遗憾的是 CSS 没有父级选择器。您可以将代码重组为:

<li><input /><label></label></li>

然后使用兄弟选择器:

#profile-container input:checked+label:before {