html - 没有选择的单选框组标签的 CSS3 选择器(未选中)

Question

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

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

通过选择

input:checked {...}

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

input:noselection { color: red; }

示例:尚未选择任何 radio :所有元素均为黑色；一旦选择了一个元素，此单选按钮就会变为绿色，而所有其他元素变为灰色。

我可以添加一些 js，如下所示，将一个类添加到包装 div 并对其进行选择，但是我想知道是否有任何 native css3 选择器。

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

Answer 1

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

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

如果此单选按钮组不是必需的，则不需要，那么您可能已经解决了。由于没有选择器代表一个空的或未选择的字段，无论其所需状态如何，我想不出除了显式列出每个未检查的输入之外的方法，并且需要一个可以用选择器表示的结构，我无法从您提供的有限标记中确定(但如果您的每个标签都直接跟随其输入，那么这是不可能的)。