bootstrap 3按钮组突出显示第n个孩子

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。