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

2023年4月1日 290次阅读

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

<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[name="rad"]:invalid ~ label {...}

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

点赞