跨度内的CSS样式异常

Question

我有一个div，其中包含复选框和标签，当选中时由CSS样式定义：

#project input:checked + label {background-color:#787878;color:white;}

我想做两个颜色例外的按钮：白色。

复选框ID="B"标签背景颜色变为红色，复选框ID＝"C"标签背景色变为蓝色。我不知道如何添加这种特殊性。

提前谢谢。

编辑：（添加HTML代码）

<input type="checkbox" id="B" value="B" style="display:none;" onclick="document.getElementById('B').style.color = 'red'"><label for="B"> checkbox B </label>

这是我更改线路级别的失败尝试。我发布CSS只是因为我认为这可以在样式中完成。

Answer 1

您不需要Javascript。如果需要，还可以添加#B, #C { display: none; }。

#B:checked + label {
    background: red;
    color: white;
}
#C:checked + label {
    background: blue;
    color: white;
}

<input type="checkbox" id="B" />
<label for="B">test</label>
<input type="checkbox" id="C" />
<label for="C">test</label>

Answer 2

这就是您想要的input[id="test"]:checked吗？它使用特定的id和已检查状态对输入进行样式设置。

据我所知，你不能在复选框中设置background-color的样式。