没有选择的单选框组标签的 CSS3 选择器（未选中）答案

【问题标题】：CSS3 selector for radio box group labels with no selection (non checked)没有选择的单选框组标签的 CSS3 选择器（未选中）
【发布时间】：2014-07-15 18:00:21
【问题描述】：

我知道你可以为选中的输入元素选择标签

<input id="rad1" type="radio" name="rad" value="1">
<label for="rad1">
    <div>Radio 1</div>
</label>

通过选择

input:checked {...}

但是，如果还没有任何组选择的单选，是否有任何选择器可以选择单选框组的所有标签元素？例如

input:noselection { color: red; }

示例：尚未选择任何收音机：所有元素均为黑色；一旦选择了一个元素，这个单选就会变成绿色，而其他所有元素都是灰色的。

我可以添加一些类似下面的 js 来将一个类添加到包装 div 并对其进行选择，但是我想知道是否有任何本机 css3 选择器。

$("fieldset :radio").change(function() {
    $(this).closest("div").addClass("answered"));
});

【问题讨论】：

只在input:checked {} 行之前使用input {...}？
奇怪的是它似乎不受支持，尽管我从未问过它。但是，正如 DavidG 所暗示的那样，如果您将某些内容应用于所有输入，然后将某些内容应用于所有已检查的输入，那么您的集合就会有所不同，并且只能影响未检查的内容（即在已检查的情况下撤消该操作）。
虽然有:not() 可以反转:checked，但这仅适用于单个输入字段； “如果一个组中的所有单选按钮都未选中”没有选择器（或它们的组合）——你必须使用 JavaScript 来实现这种逻辑。

标签： html css css-selectors

【解决方案1】：

如果需要这个单选按钮组（通过required 属性），那么假设浏览器兼容性不是问题（如果只是因为我不确定它的支持程度）:invalid 选择器就是你'正在寻找：

input[name="rad"]:invalid ~ label {...}

如果不需要这个单选按钮组，那么你可能会遇到很大的问题。由于没有选择器代表空或未选择的字段，无论其所需状态如何，除了显式列出每个未检查的输入之外，我想不出其他方法，并且需要一个可以用选择器表示的结构，我无法从您给出的有限标记中确定（但如果您的每个标签都直接跟随其输入，那么这是不可能的）。

【讨论】：

只要需要，它就可以工作。但是我的答案也不是必需的:(

【解决方案2】：

你可以使用input:not(:checked) + label

demo

编辑：

正如@BoltClock 提到的，如果您不选择第一个复选框，则此解决方案不起作用。我能想到的唯一解决方案是将 JS 用于您正在寻找的行为。

DEMO

CSS：

input + label div{
    color:black;
}

input:checked ~ label div{
    color:grey;    
}

input:checked + label div{
    color:green;    
}

【讨论】：

但是检查其中一个输入并且样式保留在未检查输入的标签上。这不是 OP 想要的。
@BoltClock 我认为 OP 想要选择所有未检查输入的标签，不是吗？
重要部分：“一个完全没有选择的单选框组”
@BoltClock 我不知道现在已经添加了更多信息，我将编辑我的答案
选择最后一个复选框仍然无法影响同一单选组中的前面标签，主要是由于 ~ 组合器的限制。我仍然认为这只能通过对 HTML 进行一些修改来实现。

【解决方案3】：

您可以使用not 伪选择器。

input:not(:checked){ color: red; }

【讨论】：