css - 要素〜要素と要素+要素の違いは何ですか

Question

これら 2 つの CSS セレクターの違いは何ですか。両方から同じ結果が得られます。

HTML:

<div>One</div>
<p>Two</p>

CSS の例 #1 :

div+p {
background:red;
}

これにより、<p>要素の背景が赤になります。

CSS 例 #2 :

div~p {
background:red;
}

これにより、<p>要素の背景も赤になります。

では、これら 2 つのセレクターの違いは何でしょうか?

Answer 1

w3.orgから:

E + F E要素の直前に F 要素

E ~ F E要素が前にある F 要素

重要な言葉は「すぐに」です。

HTML には他の要素がないため、違いはわかりませんが、一般的なケースではもちろん重要です。

Answer 2

直接の兄弟:

div 要素の直後に続く div + pp 要素

p + * p 要素に直接続く任意の要素

間接兄弟

div ~ pp 要素 div 要素の後の任意の場所

p ~ * p 要素以降の任意の要素

参考： http ://www.princexml.com/doc/6.0/selectors/