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>