选中单选按钮标签的 CSS 选择器 [英] CSS selector for a checked radio button's label

问题描述

是否可以将 css(3) 样式应用于选中的单选按钮的标签?

Is it possible to apply a css(3) style to a label of a checked radio button?

我有以下标记:

<input type="radio" id="rad" name="radio"/>
<label for="rad">A Label</label>

我希望的是

label:checked { font-weight: bold; }

会做点什么，但可惜它没有(正如我所料).

would do something, but alas it does not (as I expected).

有没有可以实现这种功能的选择器?如果有帮助，您可以用 div 等包围，但最好的解决方案是使用标签 ''for'' 属性.

Is there a selector that can achieve this sort of functionality? You may surround with divs etc if that helps, but the best solution would be one that uses the label ''for'' attribute.

应该注意的是，我可以为我的应用程序指定浏览器，所以请使用最好的 css3 等.

It should be noted that I am able to specify browsers for my application, so best of class css3 etc please.

推荐答案

试试 + 符号:它是相邻的兄弟组合子.它结合了两个具有相同父级的简单选择器序列，第二个必须立即在第一个之后.

try the + symbol: It is Adjacent sibling combinator. It combines two sequences of simple selectors having the same parent and the second one must come IMMEDIATELY after the first.

因此:

input[type="radio"]:checked+label{ font-weight: bold; } 
 //a label that immediately follows an input of type radio that is checked 

非常适合以下标记:

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

...它适用于任何结构，有或没有 div 等，只要标签跟在单选输入后面.

... and it will work for any structure, with or without divs etc as long as the label follows the radio input.

示例:

input[type="radio"]:checked+label { font-weight: bold; }

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

这篇关于选中单选按钮标签的 CSS 选择器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！