css - css3 には + と ~ の兄弟コンビネータしかないのはなぜですか? では、このような問題を解決するにはどうすればよいでしょうか。

Question

<div class="box">
    <a><p>hello-1</p></a>
    <p>world</p>
    <a><p>hello-2</p></a>
</div>

にカーソルを合わせたときに CSS3 を使用したいのですが、色が赤に変わる<a>だけです。<p>world</p>

しかし、CSS3 では、 usediv.box a:hover + pを使用すると、ホバー オンのみが機能しhello-1、hello-2機能しません。

+そして~CSS3では、その後すべてが要素に対して機能しています。ホバー時にこれら2つの色<a>を変更できるようにする方法はありますか?<p>world</p>

Answer 1

これを試して：

.box:hover > p { color: red; }
.box > p:hover { color: black; }

ライブデモ