如何将样式应用于仅使用CSS检查其复选框的标签？

Question

假设我有一个基本网页:

<LABEL ID="THE_LABEL" FOR="THE_CHECKBOX"><INPUT TYPE=checkbox ID="THE_CHECKBOX"/> Blue when checked!</LABEL>

现在让我们说我希望标签文本在未选中时为红色,在选中时为蓝色.我该怎么做？我想要一些基本的东西,如下所示.在这里,我使用一个假设的运算符" <",这意味着"有孩子",但当然它不起作用,因为没有这样的运算符:

#THE_LABEL{
  color:red;
}
#THE_LABEL < #THE_CHECKBOX[checked]{
  color:blue;
}

除了理论" <" 之外的所有东西都是有效的CSS,这让我想知道是否有一种实现这种行为的真正方法.有没有人知道有效的CSS 3(或更低版本)方式根据其复选框的状态设置标签样式,而不使用JavaScript？

Answer 1

您不应该将输入字段放在标签内。

\n

由于标签的内容出现在复选框之后，因此只需按如下方式制作 HTML：

\n

    <INPUT TYPE=checkbox ID="THE_CHECKBOX"/> \n    <LABEL ID="THE_LABEL" FOR="THE_CHECKBOX">Blue when checked!</LABEL>\n\n\xe2\x80\x8b\n

\n

然后使用这个CSS：

\n

#THE_LABEL {\n    color: red;\n}\n\n#THE_CHECKBOX:checked + #THE_LABEL {\n    color: blue;\n}\xe2\x80\x8b\n

\n

现场演示

\n

这+是一个兄弟选择器。IE8及以下版本不支持。

\n