当选中此单选按钮时，单选按钮上的第二个标签出现css问题。我已经发现第二个（和第三个）标签可以在label-tag中使用'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>
答案 0 :(得分：2)
只使用CSS这是可能的，虽然它确实需要重新排列HTML，有效地将广播<input>移到包含<label>元素的元素之前;这将移除（不可能在CSS中）遍历<input>的父级的要求，以便为非兄弟<label>元素设置样式。
/* selects the element with the id of 'id_radiobtn1' when it is
checked, uses the general sibling combinator (~) to select
all sibling <div> elements with the class of 'col-sm-4'
and then finds the descendant <label> elements within
that/those <div> elements whose 'for' attribute-value is
equal to 'id_radiobtn1': */
#id_radiobtn1:checked ~ div.col-sm-4 label[for=id_radiobtn1] {
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>
现在，除了第一个<input>元素之外，你必须有一个可见的无线电<label>，你可以使用伪元素有效地假装，同时也隐藏真实的无线电{{1} }：
<input>*,
::before,
::after {
/* to include border and padding in the calculated
dimensions (width/height) of the elements: */
box-sizing: border-box;
}
.row>input[type=radio] {
/* hiding the radio <input> elements: */
display: none;
}
/* selecting the <input> elements whose type is
equal to 'radio', which is checked and then
finding all (subsequent) sibling elements
(using the '~' combinator) which <div>
elements with a class of 'col-sm-4', and
traversing to the <label> elements within: */
input[type=radio]:checked~div.col-sm-4 label {
background-color: cyan;
}
label {
/* in order to ensure that the descendant
pseudo-elements are positioned relative
to their parent element: */
position: relative;
/* making room for the pseudo-elements: */
margin-left: 2em;
}
input[type=radio]+.col-sm-4 label::before {
/* the content property is required, even
if only an empty string, to have the
pseudo-element show up: */
content: '';
display: inline-block;
/* positioning absolutely, in relation to
the closest ancestor with a non 'static'
position, in this case the parent
<label> element: */
position: absolute;
/* moving it outside of the <label> element's
left border, to avoid the background-color: */
left: -2em;
/* purely aesthetic: */
width: 0.8em;
height: 0.8em;
/* arbitrary positioning, adjust to taste: */
top: 50%;
transform: translateY(-40%);
/* making the pseudo-element circular in shape: */
border-radius: 50%;
/* colouring the faux 'border': */
box-shadow: 0 0 0 2px #ccc;
}
/* adjusting the colours of the faux radio: */
input[type=radio]:checked+.col-sm-4 label::before {
box-shadow: 0 0 0 2px #000, inset 0 0 0 3px #fff;
background-color: limegreen;
}
答案 1 :(得分：1)
css中的+选择器意味着“直接兄弟”，即输入后的下一个元素必须是标签。这只会选择直接兄弟姐妹。
替代方案是~，意思是“任何兄弟姐妹”，并在输入后定位任何标签。
在这两种情况下，元素（输入和标签）都在同一个dom级别。没有办法遍历向上 dom，抓住兄弟，然后是标签 - 这就是你想要用html提供的。
如果您能够更改html，则将输入放在两个div之外，或将两个label放在同一div内（输入后）。< / p>
.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>
答案 2 :(得分：0)
您可以在更改事件中使用Jquery。
$(document).ready(function() {
$('#id_radiobtn1').on('change',function(){
$( "label:contains('second')" ).css( "background-color", "red" );
});
});.radioclass:checked + label {
background-color: cyan;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>
答案 3 :(得分：0)
你不能用纯css来做，因为css中的后退是不可能的。你可以帮助Jquery：
注意：我将lab2类插入标签。
$(document).ready(function(){
$('input[type=radio]').on('change',function(){
if($('.radioclass').is(':checked'))
$('.lab2').addClass('sel');
else
$('.lab2').removeClass('sel');
})
})
$(document).ready(function(){
$('input[type=radio]').on('change',function(){
if($('.radioclass').is(':checked'))
$('.lab2').addClass('sel');
else
$('.lab2').removeClass('sel');
})
})#id_radiobtn1:checked + label {
background-color: green;
}
.sel {
background-color: red;
}<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<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" class="lab2">second label</label>
</div>
</div>