html - 检查输入和具有相同父级的标签的正确选择器是什么？

Question

考试“.subNav”有一个父元素，其中包括 4 个输入元素和 4 个链接到输入的标签。

<nav class="subNav">
    <input type="radio" name="subNav" id="s1">              
    <input type="radio" name="subNav" id="s2">
    <input type="radio" name="subNav" id="s3">
    <input type="radio" name="subNav" id="s4">
    <label for="s1"><h2>S1</h2></label>
    <label for="s2"><h2>S2</h2></label>
    <label for="s3"><h2>S3</h2></label>
    <label for="s4"><h2>S4</h2></label>
</nav>

我希望当其中一个输入被选中时，它的标签得到不同的背景颜色。但我不知道这是正确的选择器。我使用了下面的选择器，但不能正常工作：

#s1:checked ~ label:nth-child(1){ background-color: rgba(0, 0, 0, 0.5); }

那么什么是正确的选择器？

Answer 1

您可以将 ID 放在标签上，但这是在没有 ID 的情况下制作它的方法：

#s1:checked ~ label[for="s1"]

看到这个小提琴：http: //jsfiddle.net/b6uRc/