CSS selector not working - input [type = radio]：checked

Question

我正在为我的单选按钮进行自定义外观。但是，如果按钮被选中，我用CSS检查时偶然发现了一个问题。

<ul class="list"> 
    <li><label for="radio_sex_male"> <i class="icon fa fa-mars" aria-hidden="true"></i> <span class="text">Male</span> </label> <input type="radio" id="radio_sex_male" name="sex" value="M"></li> 
    <li><label for="radio_sex_female"> <i class="icon fa fa-venus" aria-hidden="true"></i> <span class="text">Female</span> </label> <input type="radio" id="radio_sex_female" name="sex" value="F"></li> 
    <li><label for="radio_sex_other"> <i class="icon fa fa-genderless" aria-hidden="true"></i> <span class="text">Other</span> </label> <input type="radio" id="radio_sex_other" name="sex" value="O"></li> 
</ul> 

html body #body_cont form#new_user ul.list li input[type=radio] { display: none; visibility: collapse; } 

html body #body_cont form#new_user ul.list li label { 
    position: relative; float: left; clear: none; display: inline-block; 
    width: auto; height: 50px; margin: 0; padding: 0 20px; 

    outline: 0; cursor: pointer; 

    background-color: red; 
} 
html body #body_cont form#new_user ul.list li label i.icon { float: left; font-size: 30px; margin: 0 8px 0 0; line-height: 50px; } 
html body #body_cont form#new_user ul.list li label span.text { float: left; font-family: "Open Sans", sans-serif; font-weight: 600; font-size: 16px; line-height: 50px; } 

这就是这条线。当单选按钮被选中时，它需要将背景变成绿色。

html body #body_cont form#new_user ul.list li input[type=radio]:checked + label { background-color: green; } 

我错过了什么吗？

Answer 1

div1 + div2目标div2正好在div1后面。所以，为了使你的代码工作，你必须重做你的html部分。将<input>前<label>内<li> S：

html body #body_cont form#new_user ul.list li input[type=radio] { display: none; visibility: collapse; } 
 

 
html body #body_cont form#new_user ul.list li label { 
 
    position: relative; float: left; clear: none; display: inline-block; 
 
    width: auto; height: 50px; margin: 0; padding: 0 20px; 
 
    outline: 0; cursor: pointer; 
 
    background-color: red; 
 
} 
 
html body #body_cont form#new_user ul.list li label i.icon { float: left; font-size: 30px; margin: 0 8px 0 0; line-height: 50px; } 
 
html body #body_cont form#new_user ul.list li label span.text { float: left; font-family: "Open Sans", sans-serif; font-weight: 600; font-size: 16px; line-height: 50px; } 
 
html body #body_cont form#new_user ul.list li input[type=radio]:checked + label { background-color: green; }

<div id="body_cont"> 
 
<form id="new_user"> 
 
<ul class="list"> 
 
    <li><input type="radio" id="radio_sex_male" name="sex" value="M"><label for="radio_sex_male"> <i class="icon fa fa-mars" aria-hidden="true"></i> <span class="text">Male</span> </label></li> 
 
    <li><input type="radio" id="radio_sex_female" name="sex" value="F"><label for="radio_sex_female"> <i class="icon fa fa-venus" aria-hidden="true"></i> <span class="text">Female</span> </label> </li> 
 
    <li><input type="radio" id="radio_sex_other" name="sex" value="O"><label for="radio_sex_other"> <i class="icon fa fa-genderless" aria-hidden="true"></i> <span class="text">Other</span> </label> </li> 
 
</ul> 
 
</form></div>