html - 如何将样式应用于仅使用 CSS 选中其复选框的标签？

Question

假设我有一个基本网页:

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

现在假设我希望标签文本在未选中时为红色，在选中时为蓝色。我该怎么做？我想要如下基本的东西。在这里，我使用了一个假设的运算符“<”，这意味着“有 child ”，但它当然不会起作用，因为没有这样的运算符:

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

除了理论上的“<”之外的所有内容都是有效的 CSS，这让我想知道是否有实现此行为的真正方法。 有谁知道在不使用 JavaScript 的情况下根据复选框的状态设置标签样式的有效 CSS 3(或更低版本)方法？

Answer 1

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

由于标签的内容出现在复选框之后，只需这样制作您的 HTML:

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

​

然后使用这个 CSS:

#THE_LABEL {
    color: red;
}

#THE_CHECKBOX:checked + #THE_LABEL {
    color: blue;
}​

Live demo

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