html - ホバー時にアンカーの後にすべての兄弟をスタイルする

Question

ホバーした後、すべてのノードのスタイルを設定しようとしてい<a>ます。

HTMLコードは

<a href="#">test</a>
<p>Is styles</p>
<p>Is not styled</p>
<p>Is not styled</p>
<p>Is not styled</p>
<p>Is not styled</p>

CSSコードは

a:hover + p {
    background: #ffbbff;
}

ここにFiddleがあります。問題は、最初の兄弟だけがスタイルされていることです。私は何かが恋しいですか？

score 3 · Accepted Answer

a:hover ~ p {
    background: #ffbbff;
}

score 1 · Accepted Answer

これは+、隣接する兄弟だけを選択します。使いたい~

score 0 · Accepted Answer

間違ったセレクターを使用しています。隣接する兄弟+を選択します。一般的な兄弟セレクターを使用する必要があります。 ~

a:hover ~ p {
    background: #ffbbff;
}

必要に応じて、これらのセレクターを組み合わせることもできます。

a:hover ~ p {
    background: #ffbbff;
}

a:hover + p {
    background: #ffffbb;
}

score 0 · Accepted Answer

一般的な兄弟セレクターが必要です+。隣接する兄弟セレクターです

これを試して：

a:hover ~ p {
    background: #ffbbff;
}

4 に答える 4