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

Question

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

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

选择

input:checked {...}

然而，如果不是任何组选择的无线电，有没有选择器来选择一个无线电盒组的所有标签元素？ e.g

input:noselection { color: red; }

示例：尚未选择无线电：所有元素均为黑色;只要选择了一个元素，此广播就会变为绿色而其他所有广告都会变灰。

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

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

Answer 1

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

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

如果此单选按钮组不，则可能需要进行相应修复。由于没有选择器表示空的或未选择的字段而不管其所需的状态如何，我想不出除了明确列出每个未检查的输入之外的其他方法，并且这需要一个可以用选择器表示的结构，我无法通过您给出的有限标记来确定（但如果您的每个标签都直接跟随其输入，那么这是不可能的。）

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

Answer 3

您可以使用not伪选择器。

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