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 {

Answer 2

问题来自于尝试使用dict定位父选择器label:before。 CSS不允许你爬上DOM＆＃39;以这种方式。相反，您可能想尝试使用以下标记：

input:checked

请勿忘记按照HTML规范关闭输入代码！

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

2 个答案: