css - セレクターとの混乱、div ~ h1 と div > h1

Question

を理解するのに問題がありdiv ~ h1ます。div に直接続くすべての h1 タグを選択しているようです。

しかし、これはdiv > h1実際に行うことではありませんか?

div の直接の子であるすべての h1 を選択しますか?

私も遭遇div + h1し、最初は混乱しましたが、これは単一の要素、つまり div に続く 1 つの H1 タグのみを選択するように見えます。

誰かが持っているアイデアは本当に役に立ちます。

score 1 · Accepted Answer

p ~ ul

~ は、P 要素が先行するすべての UL 要素を選択します。

body > P

BODY の子であるすべての P 要素のスタイルを設定します。

言い換えると

~ セレクターは直前の先行句を使用しますが、> はより一般的で、親からどれだけ離れていてもすべての子をターゲットにします。