Question

如何组合以下选择器以便我可以选择选中单选按钮后面的标签？

+不起作用，我假设因为它是在特定元素而不是整个选择器上运行的？

.container > .widget > input[type="radio"]:checked
.container > .widget > label

<div class="container">
  <div class="widget">
    <span><input type="radio" checked/></span>
    <span><label for="..."></span>
  </div>
</div>

Answer 1

很难回答没有你的HTML。但是在输入后直接标注标签。您可以使用Adjacent sibling selectors +来定位标签。

＆＃13;

.container > .widget > input[type="radio"]:checked + label{color: red;}

＆＃13;

<div class="container">
  <div class="widget">
    <input type="radio" id="rdbtn1"/> <label for="rdbtn1"> My label</label>
  </div>
</div>

＆＃13;

修改现在您添加了HTMl，我看到我的假设是标签是在输入后直接出错了。如果使用带有当前HTML标记的CSS选择输入，则无法定位标签。

如果您的设计要将输入和标签包装在单独的SPAN中，那么您可以使用Javascript来实现此目的。

我建议您更改HTML标记，以便使用+ - 选择器定位范围。

Answer 2

您无法遍历CSS中的父级。此外，<label>中不能包含<span>。你应该最终改变方式：

＆＃13;

* {font-family: 'Segoe UI';}
.container > .widget > label {font-weight: normal;}
.container > .widget > input[type="checkbox"]:checked + label {font-weight: bold;}

＆＃13;

<div class="container">
  <div class="widget">
    <input type="checkbox" checked="checked" id="theCheck" />
    <label for="theCheck">Label</label>
  </div>
</div>

＆＃13;

将+运算符与非常特定的选择器CSS结合使用

2 个答案: