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

Question

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

我有以下标记:

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

我希望的是

label:checked { font-weight: bold; }

会做点什么，但遗憾的是它没有(如我所料)。

是否有选择器可以实现这种功能？如果有帮助，您可以用 div 等包围起来，但最好的解决方案是使用标签“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 等，只要标签跟在 radio 输入之后。

示例:

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>