跨度内的CSS样式异常？答案

【问题标题】：CSS style exceptions within a span?跨度内的CSS样式异常？
【发布时间】：2015-06-08 21:17:59
【问题描述】：

我有一个 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，因为我认为这可以在样式中完成。

【问题讨论】：

您也可以发布您的 HTML 吗？

标签： html css

【解决方案1】：

这就是你要找的input[id="test"]:checked 这个样式输入具有特定的 id 和检查状态。

据我所知，您无法在复选框中设置background-color 的样式。

【讨论】：

【解决方案2】：

您不需要 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>

【讨论】：