Html CSS3选择器，用于无选择的无线电视盒组标签（未选中）

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

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

但是，如果尚未选择组的任何单选项，是否有任何选择器可选择单选框组的所有标签元素？e、 g

input:noselection { color: red; }

示例：尚未选择任何收音机：所有元素均为黑色；一旦选定一个元素，此收音机将变为绿色，其他所有元素将变为灰色

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

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

---

如果此单选按钮组是必需的（通过

required

属性），则假定浏览器兼容性不是问题（如果只是因为我不确定它是否得到了很好的支持），

：无效的

选择器就是您要找的：

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

---

如果这个单选按钮组不是必需的，那么您可能会陷入困境。由于不存在表示空字段或未选中字段的选择器，无论其所需状态如何，我想不出除了显式列出每个未检查的输入之外的其他方法，这需要一个可以用选择器表示的结构，我无法从您提供的有限标记中确定该结构（但如果每个标签都直接跟随其输入，则这是不可能的）。

您可以使用

input:not（：checked）+label

编辑：

正如@BoltClock所提到的，如果不选中第一个复选框，这个解决方案就不适用。我能想到的唯一解决方案是使用JS实现您所寻找的行为

CSS:

---

您可以使用

not

伪选择器

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

---

只需在

input:checked{}

行之前使用

input{…}

？奇怪的是，它似乎不受支持，尽管我从来没有问过它。然而，正如DavidG所指，如果你对所有输入应用一些东西，然后对所有选中的输入应用一些东西，那么你就有了集合的差异，并且只能影响未选中的输入（即，在选中的字段上撤消该操作）。虽然有

：not（）

可以反转

：checked

，但这仅适用于单个输入字段；没有“如果组中的所有单选按钮均未选中”的选择器（或其组合）–这种逻辑必须使用JavaScript。但如果选中其中一个输入，则样式仍保留在未选中输入的标签上。这不是OP想要的。@BoltClock我认为OP想要选择所有未选中输入的标签，不是吗？重要的部分：“一个根本没有选择的广播框组”@BoltClock我取消设置，现在添加了更多信息，我将编辑我的答案选择最后一个复选框仍然无法影响同一广播组中前面的标签，主要是由于

~

组合符的限制。我仍然认为这只能通过对HTML进行一些修改来实现。这可以根据需要工作更长时间。但是我的答案也不是必须的：(

input + label div{
    color:black;
}

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

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

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