检查嵌套单选按钮时选择标签元素

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