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

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>

我想在输入其中一个输入时,它的标签会得到不同的背景颜色.但我不知道waht是正确的选择器.我使用下面的选择器,但不能正常工作:

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

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

Answer 1

您可以在标签上放置ID,但这是如何在没有ID的情况下制作ID:

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

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