1

試験用の親要素「.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>

入力の1つがチェックされたときに、ラベルが異なる背景色になるようにしたい。しかし、それを行うための正しいセレクターが何であるかはわかりません。以下のセレクターを使用しましたが、正しく機能しません:

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

では、正しいセレクターは何ですか？

4

1 に答える 1

5

ラベルに ID を付けることができますが、ID なしで作成する方法は次のとおりです。

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

このフィドルを参照してください：http://jsfiddle.net/b6uRc/

于 2013-06-20T07:57:17.083 に答える