css - bootstrap 3 按钮组突出显示第 n 个 child

Question

我正在尝试突出显示 bootstrap 3 按钮组中的第一个单选按钮，以使用 CSS 显示与其他单选按钮不同的背景颜色。我可以使用事件中的 Jquery 来执行此操作，但如果能使它正常工作就更好了。所以我在 bootply 上尝试了这个但没有运气......

.btn-group input[type="radio"]:first-child:checked + label { 
    background-color:#CAFF70 !important;
}
<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-sm btn-default">
    <input type="radio" id="ok_1" name="options_1" value="ok"> <span class="glyphicon glyphicon-ok"></span>
  </label>
  <label class="btn btn-sm btn-default">
    <input type="radio" id="na_1" name="options_1" value="na"><span class="glyphicon glyphicon-eye-close"></span>
  </label>
  <label class="btn btn-sm btn-default">
    <input type="radio" id="no_1" name="options_1" value="repair"> <span class="glyphicon glyphicon-pencil"></span>
  </label>                
</div>

Answer 1

问题是在您的代码中输入的是标签的子项，这是错误的。输入和标签必须在同一层。

<div class="btn-group">

  <input type="radio" id="ok_1" name="options_1" value="ok">
  <label class="btn btn-sm btn-default"><span class="glyphicon glyphicon-ok"></span></label>

  <input type="radio" id="ok_2" name="options_1" value="ok">
  <label class="btn btn-sm btn-default"><span class="glyphicon glyphicon-ok"></span></label> 

  <input type="radio" id="ok_3" name="options_1" value="ok">
  <label class="btn btn-sm btn-default"><span class="glyphicon glyphicon-ok"></span></label>

</div>

Check here

此外，如果您想设置单选按钮的样式(如您展示的按钮)，您可以阅读此 tutorial .