html - 具有多个标签的已选中单选按钮的 CSS

Question

选中此单选按钮时，单选按钮上的第二个标 checkout 现 CSS 问题。我已经发现可以在标签标签中使用“for”来创建第二个(和第三个)标签。不可能将所有内容都分组到一个标签中。

选中单选按钮时如何更改第二个标签的背景？

我的(简化的)代码如下，第一个标签有效，第二个标签无效。

.radioclass:checked + label {
  background-color: cyan;
}

<div class="row">
  <div class="col-sm-4">
    <input class="radioclass" id="id_radiobtn1" type="radio" name="radiobtn1" value="1">
    <label for="id_radiobtn1">first label</label>
  </div>
  <div class="col-sm-4">
    <label for="id_radiobtn1">second label</label>
  </div>
</div>

Answer 1

css 中的 + 选择器表示“直接兄弟”，即输入后的下一个元素必须是标签。这只会选择直系 sibling 。

另一种方法是 ~，这意味着“任何兄弟”并在输入后定位任何标签。

在这两种情况下，元素(输入和标签)都在相同的 dom 级别。没有办法遍历向上 dom，捕获同胞，然后是标签——这就是你试图用提供的 html 做的。

如果您能够更改 html，则要么将输入放在两个 div 之外，要么将两个 label 放在同一个 div(输入后)。

.radioclass:checked ~ div label {
  background-color: cyan;
}

<div class="row">
  <input class="radioclass" id="id_radiobtn1" type="radio" name="radiobtn1" value="1">
  <div class="col-sm-4">
    <label for="id_radiobtn1">first label</label>
  </div>
  <div class="col-sm-4">
    <label for="id_radiobtn1">second label</label>
  </div>
</div>

.radioclass:checked ~ label {
  background-color: cyan;
}

<div class="row">
  <div class="col-sm-4">
    <input class="radioclass" id="id_radiobtn1" type="radio" name="radiobtn1" value="1">
    <label for="id_radiobtn1">first label</label>
    <label for="id_radiobtn1">second label</label>
  </div>
</div>

如果您不能更改 html，那么 JS 是唯一的其他方法(出于演示目的，我已将输入更改为复选框):

$('input').on('change', function(){
  var func = 'removeClass';
  if($(this).is(':checked')) {
    func = 'addClass';
  }
  
  $('label[for="'+$(this).attr('id')+'"]')[func]('checked');
});

label.checked {
  background-color: cyan;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="row">
  <div class="col-sm-4">
    <input class="radioclass" id="id_radiobtn1" type="checkbox" name="radiobtn1" value="1">
    <label for="id_radiobtn1">first label</label>
  </div>
  <div class="col-sm-4">
    <label for="id_radiobtn1">second label</label>
  </div>
</div>