如何只使用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都是有效的，这让我想知道是否有一种真正的方法来实现这种行为。有没有人知道一个基于其复选框状态而不使用JavaScript的有效CSS 3（或更低版本）样式标签的方法？

- Ky -

---

你真的会用全大写字母编程吗？ - Ayush

当我编写HTML元素、它们的属性以及像元素ID这样的“常量”时，我会这样做。我发现这有助于我更容易区分元素和实际内容，即使我正在使用一台公共计算机并且不得不使用记事本或其他类似糟糕的情况。我希望我的偏好对您没有造成麻烦，但它们产生相同的结果并且对我个人有帮助。此外，如果我记得没错的话，它们曾经是首选方式；3 - Ky -

感觉你的代码在对我大喊大叫..哈哈 - Ayush

呵呵！有时候这样读起来很有趣 :3 - Ky -

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;
}​

演示

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

- Ayush

---

哦，我喜欢它！不过，标签能否包含输入框，这样标签和框之间就没有间隙了吗？ - Ky -

@Supuhstar 只需删除 <input /> 后面的换行符（或任何空格）。 - Kijewski

谢谢！另外，如果我正确理解IE8的行为，它应该支持在文档中使用<!DOCTYPE>。 - Ky -

注意，在我的编辑之前，复选框有两个“ID”。这在HTML中是不正确的，导致第二个被丢弃，这意味着“LABEL”的“FOR”也被忽略了。 - Ky -

Answer 2

抱歉，请参见：

是否有CSS父选择器？和活动子元素的父级复杂CSS选择器

关于这个主题的更多讨论，但似乎不可能。

- Ariel

Answer 3

CSS has 选择器 正在逐渐被各种浏览器实现。目前，根据 caniuse.com 的数据，全球支持率为 56.19%。使用此选择器，您可以达到原始问题所要求的效果：基于嵌套复选框的选中状态来设置标签样式。示例代码位于此处，下面是示例中使用的 HTML 代码。请注意，此功能在 Chromium 浏览器中可用，但当前尚不支持 Firefox（有关支持的浏览器，请参阅上面引用的 canIUse 页面）。

<style>
    label {
        color: red;
    }

    label:has(> input[type='checkbox']:checked) {
        color: blue;
    }
</style>

<label>
    Me blue when checked.
    <input type="checkbox">
</label>

- jeremysawesome

Answer 4

我相信这在CSS4中可以实现，但目前仅是理论上的：

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

^{JSFiddle测试}

浏览器支持

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

• WebKit：否（Safari，iOS web视图）
  • Blink：否（Chrome，基于Chromium的浏览器，许多开源项目，Android web视图）
• Gecko：否（Firefox，许多开源项目）
• Trident：否（IE，Windows web视图，Steam）
  • EdgeHTML：否（Microsoft Edge）

- Ky -

---

这是不正确的。CSS3可以很好地完成它。请参见此处的已接受答案。 - Cullub

@cullub 请阅读我的完整答案。目前只是理论性的。当然，我也看到了被接受的答案；我已经接受了它 :P - Ky -