0 
<span class='radio'>Place holder for Radio1</span>
<input checked type=radio name='radio' class='radio'>
<span class='radio'>Place holder for Radio2</span>
<input type=radio name='radio' class='radio'>

<span>これでは、それぞれのラジオボタンに関連付けられたものだけを表示したいのですが...

* {
    visibility:hidden
}
.radio + .radio:checked {
    visibility:visible;
}

これは動作しますが、動作しません:

* {
    visibility:hidden
}
.radio:checked + .radio {
    visibility:visible;
}

では、以前の隣接する兄弟に関連する css を選択して操作できないのはなぜですか?

[jsfiddle]

4

1 に答える 1

2

+前の兄弟ではなく、次の兄弟しか選択できないためです。

また、同じクラス名を持つ 2 つの完全に異なる要素があり、クラスごとにどちらかを選択しようとしている場合に何が問題になるかについて、非常に興味深い例を設定しました。+セレクターが両方の方法で機能する場合、セレクターの記述方法にvisibility: visible関係なく、最初の 2 つの要素の両方が機能します。

以前の兄弟セレクターがないため、これを回避する別の方法を見つける必要があります。さらに、「一般的な」兄弟セレクターは~、ではありません+が、どちらも前の兄弟に到達することはできません...

于 2012-11-27T02:44:55.287 に答える