html - 如何将样式应用于仅使用 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？

score 4 · Accepted Answer

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

由于标签的内容出现在复选框之后，只需这样制作您的 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;
}

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

score 1 · Accepted Answer

抱歉，请看：

有关此主题的更多讨论，但这似乎是不可能的。

score 1 · Accepted Answer

我相信这将适用于CSS4，但现在这只是理论上的：

#THE_LABEL{
  color:red;
}
#THE_LABEL /for/ :checked {
  color:blue;
}

浏览器支持

我每隔几个月就会回来检查一次。以下是以下布局引擎的现代版本的支持状态：

WebKit：否（Safari、iOS 网络视图）
- Blink：否（Chrome、基于 Chromium 的浏览器、许多开源项目、Android Web 视图）
Gecko：否（Firefox，许多开源项目）
三叉戟：否（IE、Windows 网络视图、Steam）
- EdgeHTML：否（Microsoft Edge）