Html 一个范围内的CSS样式异常？

我有一个带有复选框和标签的DIV，选中时由CSS样式定义：

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

我想做两个按钮，除了颜色：白色

复选框ID=“B”将标签背景色变为红色，复选框ID=“C”将标签背景色变为蓝色。我想不出如何增加这种特殊性

提前谢谢

编辑：（添加HTML代码）

复选框B

---

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

这就是您正在寻找的

input[id=“test”]：checked

此样式使用特定id和checked状态输入

---

据我所知，你不能在复选框中设置背景色。

你不需要Javascript。如果需要，还可以添加

#B、#C{display:none；}

#B：选中+标签{
背景：红色；
颜色：白色；
}
#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>