选中的单选按钮标签的CSS选择器

Question

是否可以将css（3）样式应用于选中的单选按钮的标签？

我有以下标记：

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

我希望的是

label:checked { font-weight: bold; }

会做某事，但是可惜它没有（我预期的那样）。

是否有一个选择器可以实现这种功能？如果有帮助，您可以将divs围起来，但是最好的解决方案是使用标签“ for”属性。

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

Answer 1

尝试+符号：它是相邻的同级组合器。它结合了两个具有相同父级的简单选择器序列，第二个选择器必须在第一个选择器之后 立即 出现。

因此：

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等。

例：

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>