檢查嵌套單選按鈕時選擇標籤元素

Question

針對包裹在輸入字段周圍的標籤，正確的CSS語法是什麼？

<div class="radio"> 
    <label> 
     <input checked="checked" name="duration" type="radio" value="2" /> 
       2 
    </label> 
</div> 

這不是工作：

.radio input[type='radio']:checked label { outline: 1px solid gray; } 

Answer 1

由於CSS不能選擇文本節點，你將不得不使用label標籤來包裝2，比你需要更改的標記像下面爲CSS無法選擇上一個元素。

<div class="radio"> 
    <input checked="checked" name="duration" type="radio" value="2" /> 
    <label>2</label> 
</div> 

而且使用相鄰選擇像

.radio input[type='radio']:checked + label { 
    outline: 1px solid gray; 
} 

Demo

---

如果你不想來包裝2在label標籤作爲我向你以前不是使用span標籤一樣

<div class="radio"> 
    <label> 
     <input checked="checked" name="duration" type="radio" value="2" /> 
     <span>2</span> 
    </label> 
</div> 

和選擇像

.radio input[type='radio']:checked + span { 
    outline: 1px solid gray; 
} 

Demo 2