检查单选button标签的CSSselect器
是否可以将css（3）样式应用于选中的单选button的标签？
我有以下标记：
<input type="radio" id="rad" name="radio"/> <label for="rad">A Label</label> 我所希望的是
label:checked { font-weight: bold; }
会做些什么，但唉，不（如我所料）。
有没有一个select器可以实现这种function？ 如果有帮助的话，你可以用div等包围，但是最好的解决scheme是使用标签“'作为属性。
应该指出的是，我可以指定我的应用程序的浏览器，所以请最好的类css3等。
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>
…只要标签遵循收音机input，它就可以用于任何结构，有或没有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>
我知道这是一个老问题，但是如果你希望<input>是<label>一个子元素，而不是将它们分开，那么这是一个纯CSS的方式，你可以完成它：
:checked + span { font-weight: bold; }
然后用<span>包装文本：
<label> <input type="radio" name="test" /> <span>Radio number one</span> </label>
在JSFiddle上查看 。
我忘记了第一次看到它提到的地方，但只要设置了for=属性，实际上就可以将标签embedded其他地方的容器中。 所以，让我们看看SO上的一个例子：
* { padding: 0; margin: 0; background-color: #262626; color: white; } .radio-button { display: none; } #filter { display: flex; justify-content: center; } .filter-label { display: inline-block; border: 4px solid green; padding: 10px 20px; font-size: 1.4em; text-align: center; cursor: pointer; } main { clear: left; } .content { padding: 3% 10%; display: none; } h1 { font-size: 2em; } .date { padding: 5px 30px; font-style: italic; } .filter-label:hover { background-color: #505050; } #featured-radio:checked~#filter .featured, #personal-radio:checked~#filter .personal, #tech-radio:checked~#filter .tech { background-color: green; } #featured-radio:checked~main .featured { display: block; } #personal-radio:checked~main .personal { display: block; } #tech-radio:checked~main .tech { display: block; }
<input type="radio" id="featured-radio" class="radio-button" name="content-filter" checked="checked"> <input type="radio" id="personal-radio" class="radio-button" name="content-filter" value="Personal"> <input type="radio" id="tech-radio" class="radio-button" name="content-filter" value="Tech"> <header id="filter"> <label for="featured-radio" class="filter-label featured" id="feature-label">Featured</label> <label for="personal-radio" class="filter-label personal" id="personal-label">Personal</label> <label for="tech-radio" class="filter-label tech" id="tech-label">Tech</label> </header> <main> <article class="content featured tech"> <header> <h1>Cool Stuff</h1> <h3 class="date">Today</h3> </header> <p> I'm showing cool stuff in this article! </p> </article> <article class="content personal"> <header> <h1>Not As Cool</h1> <h3 class="date">Tuesday</h3> </header> <p> This stuff isn't nearly as cool for some reason :(; </p> </article> <article class="content tech"> <header> <h1>Cool Tech Article</h1> <h3 class="date">Last Monday</h3> </header> <p> This article has awesome stuff all over it! </p> </article> <article class="content featured personal"> <header> <h1>Cool Personal Article</h1> <h3 class="date">Two Fridays Ago</h3> </header> <p> This article talks about how I got a job at a cool startup because I rock! </p> </article> </main>
你可以使用一些jQuery：
$('input:radio').click(function(){ $('label#' + $(this).attr('id')).toggleClass('checkedClass'); // checkedClass is defined in your CSS });
您需要确保您的选中的单选button在页面加载时也具有正确的类别。
更新：
这只对我有用，因为我们现有的生成的html是古怪的，与radio s一起生成label ，并给他们两个checked属性。
没关系，还有Brilliand大起大落！
如果你的标签是一个checkbox的兄弟（通常是这种情况），你可以使用~兄弟select器和一个label[for=your_checkbox_id]来解决它…或者给标签一个id，如果你有多个标签（就像在这个例子中我使用button标签）
来到这里寻找相同的 – 但最终在文档中find我的答案。
具有checked属性的label元素可以这样select：
label[checked] { ... }
我知道这是一个古老的问题，但也许它有助于那里的人:)
