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/

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

1 个答案: