html - 跨度内的 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>