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

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无法选择文本节点，您必须使用2标记包装label，而不需要像下面那样更改标记，因为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标签中，而不是像{/ p>那样使用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